/* ============================================================ CAPA BLANCO Y NEGRO ============================================================ Lleva las paginas del diseno antiguo (blog, servicios e institucionales) a la paleta de la marca: blanco y negro. Va acotada a `body.dtw-bn`. Sin esa clase el archivo no hace nada, asi que se revierte quitando la palabra del . Se apoya en que el diseno antiguo ya usa variables: `var(--blue)` aparece 84 veces y `var(--blue-sky)` 36. Redefinirlas aqui cambia todo eso de una vez. Lo que quedaba escrito con el color literal se corrige mas abajo, uno por uno, y esa lista salio de auditar la pagina renderizada, no de leer la hoja. La home y /proyectos/ NO llevan esta capa: ya son blanco y negro por `limpio.css`. ============================================================ */ /* ------------------------------------------------------------ 1. LAS VARIABLES Van en `body` y no en `:root` para que se pueda encender por pagina. Todo lo que hay dentro del body las hereda. ------------------------------------------------------------ */ body.dtw-bn { --blue: #0a0a0a; --blue-dark: #000000; --blue-sky: #0a0a0a; --blue-light: #f2f2f2; --green: #0a0a0a; --dtw-blue: #0a0a0a; --dtw-cyan: #0a0a0a; --dtw-lime: #0a0a0a; --dtw-orange: #0a0a0a; --dtw-soft: #f2f2f2; --ux-ring: 0 0 0 4px rgba(10, 10, 10, .16); } /* ------------------------------------------------------------ 2. LOS ENLACES TIENEN QUE SEGUIR PARECIENDO ENLACES Este es el riesgo real del cambio: en el diseno azul, un enlace dentro de un parrafo se reconocia SOLO por el color. Al pasar a negro queda igual que el texto que lo rodea y deja de verse que se puede pinchar. El subrayado devuelve esa senal, y ademas es lo que pide la WCAG: no distinguir solo por color. Se aplica al texto corrido, no a menus ni botones, que ya se reconocen por su forma. ------------------------------------------------------------ */ body.dtw-bn .article-body a:not(.btn-primary):not(.btn-outline), body.dtw-bn .article-content a:not(.btn-primary):not(.btn-outline), body.dtw-bn .service-answer a:not(.btn-primary):not(.btn-outline), body.dtw-bn .dtw-quien a:not(.btn-primary):not(.btn-outline), body.dtw-bn .faq-answer a:not(.btn-primary):not(.btn-outline) { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } body.dtw-bn .article-body a:hover, body.dtw-bn .article-content a:hover, body.dtw-bn .service-answer a:hover, body.dtw-bn .dtw-quien a:hover, body.dtw-bn .faq-answer a:hover { text-decoration-thickness: 2px; } /* GENERADO:INICIO - no editar a mano, lo escribe tools/generar_blanco_negro.py */ .bonus-row { background-color: rgba(229, 229, 229, 0.08) !important; border-top-color: rgba(229, 229, 229, 0.25) !important; border-right-color: rgba(229, 229, 229, 0.25) !important; border-bottom-color: rgba(229, 229, 229, 0.25) !important; border-left-color: rgba(229, 229, 229, 0.25) !important; border: 1px solid rgba(229, 229, 229, 0.25) !important; } .plan-col.featured .bonus-row { background-color: rgba(229, 229, 229, 0.12) !important; } .plan-col.featured .btn-add-cart:hover { background-color: rgba(229, 229, 229, 0.08) !important; } .calc-example-tile.featured { background-color: rgba(229, 229, 229, 0.1) !important; } .hero-right .browser { box-shadow: rgba(0, 0, 0, 0.35) 0px 30px 80px -20px, rgba(10, 10, 10, 0.25) 0px 12px 32px -12px !important; } .hero-right::after { background-image: radial-gradient(rgba(10, 10, 10, 0.35), transparent 70%) !important; } .btn-blue:hover { box-shadow: rgba(10, 10, 10, 0.45) 0px 8px 22px, rgba(255, 255, 255, 0.2) 0px 1px 0px inset !important; } .sol-card:hover { box-shadow: rgba(10, 10, 10, 0.25) 0px 20px 40px -16px !important; } .tool-card::after { background-image: radial-gradient(circle, rgba(10, 10, 10, 0.08) 0%, transparent 50%) !important; } .faq-btn:hover { background-color: rgba(10, 10, 10, 0.04) !important; } .faq-item.is-open { box-shadow: rgba(10, 10, 10, 0.15) 0px 4px 16px -4px !important; } @media (hover: hover) and (pointer: fine) { .cursor-glow { background-image: radial-gradient(circle, rgba(10, 10, 10, 0.08), transparent 60%) !important; } } .nav-logo svg { box-shadow: rgba(229, 229, 229, 0.08) 0px 0px 0px 6px !important; } .footer-wa { box-shadow: rgba(10, 10, 10, 0.24) 0px 16px 34px !important; } .footer-wa:hover { box-shadow: rgba(10, 10, 10, 0.32) 0px 20px 44px !important; } .browser-mock::after { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.26), transparent 64%) !important; } .mock-hero { background-image: linear-gradient(135deg, rgba(229, 229, 229, 0.24), rgba(10, 10, 10, 0.08)), initial !important; } .porque-card:hover { border-top-color: rgba(229, 229, 229, 0.45) !important; border-right-color: rgba(229, 229, 229, 0.45) !important; border-bottom-color: rgba(229, 229, 229, 0.45) !important; border-left-color: rgba(229, 229, 229, 0.45) !important; } .porque-card .icon { background-color: rgba(229, 229, 229, 0.12) !important; } .porque-card .icon::after { box-shadow: rgba(229, 229, 229, 0.38) 0px 0px 22px !important; } .agency-proof-card:first-child { background-image: radial-gradient(circle at 88% 10%, rgba(229, 229, 229, 0.24), transparent 34%), initial !important; } .blog-card:hover { box-shadow: rgba(10, 10, 10, 0.12) 0px 22px 60px !important; } .blog-card--dark .blog-tag { background-color: rgba(229, 229, 229, 0.14) !important; } .blog-card__link { color: #0a0a0a !important; } .blog-category-map { border-top-color: #f2f2f2 !important; border-right-color: #f2f2f2 !important; border-bottom-color: #f2f2f2 !important; border-left-color: #f2f2f2 !important; } .blog-category-map h5 { color: #0a0a0a !important; } .article-content h5 { color: #0a0a0a !important; } .internal-link-card { border-top-color: #f2f2f2 !important; border-right-color: #f2f2f2 !important; border-bottom-color: #f2f2f2 !important; border-left-color: #f2f2f2 !important; } .internal-link-card:hover { box-shadow: rgba(10, 10, 10, 0.12) 0px 18px 50px !important; } .article-toc a:hover { color: #0a0a0a !important; } .related-list a:hover { color: #0a0a0a !important; } .article-share button { border-top-color: #f2f2f2 !important; border-right-color: #f2f2f2 !important; border-bottom-color: #f2f2f2 !important; border-left-color: #f2f2f2 !important; color: #0a0a0a !important; } .article-share a { border-top-color: #f2f2f2 !important; border-right-color: #f2f2f2 !important; border-bottom-color: #f2f2f2 !important; border-left-color: #f2f2f2 !important; color: #0a0a0a !important; } .blog-cat:hover { border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } :root { --ux-ring: 0 0 0 4px rgba(229, 229, 229, .18) !important; --blue: #0a0a0a !important; --blue-dark: #000000 !important; --blue-sky: #0a0a0a !important; --blue-light: #f2f2f2 !important; --green: #0a0a0a !important; --dtw-soft: #f2f2f2 !important; --dtw-cyan: #0a0a0a !important; --dtw-blue: #0a0a0a !important; --dtw-lime: #0a0a0a !important; --dtw-orange: #0a0a0a !important; } .ux-spotlight { background: radial-gradient( 520px circle at var(--ux-x, 50%) var(--ux-y, 28%), rgba(229, 229, 229, .13), rgba(163,230,53,.055) 28%, transparent 62% ) !important; } .ux-action-bar button:hover { background-image: linear-gradient(135deg, #e5e5e5, #0a0a0a) !important; } .ux-action-bar button.is-hot { background-image: linear-gradient(135deg, #e5e5e5, #0a0a0a) !important; } .ux-panel__eyebrow { color: #e5e5e5 !important; } .ux-command__eyebrow { color: #e5e5e5 !important; } .ux-choice.is-active { border-top-color: rgba(229, 229, 229, 0.7) !important; border-right-color: rgba(229, 229, 229, 0.7) !important; border-bottom-color: rgba(229, 229, 229, 0.7) !important; border-left-color: rgba(229, 229, 229, 0.7) !important; background-color: rgba(229, 229, 229, 0.16) !important; } .ux-panel__summary { border-top-color: rgba(229, 229, 229, 0.24) !important; border-right-color: rgba(229, 229, 229, 0.24) !important; border-bottom-color: rgba(229, 229, 229, 0.24) !important; border-left-color: rgba(229, 229, 229, 0.24) !important; background-color: rgba(229, 229, 229, 0.12) !important; } .ux-panel__actions a { background-image: linear-gradient(135deg, #e5e5e5, #0a0a0a) !important; } .ux-command input:focus { border-top-color: rgba(229, 229, 229, 0.78) !important; border-right-color: rgba(229, 229, 229, 0.78) !important; border-bottom-color: rgba(229, 229, 229, 0.78) !important; border-left-color: rgba(229, 229, 229, 0.78) !important; } .ux-command__item:hover { border-top-color: rgba(229, 229, 229, 0.62) !important; border-right-color: rgba(229, 229, 229, 0.62) !important; border-bottom-color: rgba(229, 229, 229, 0.62) !important; border-left-color: rgba(229, 229, 229, 0.62) !important; background-color: rgba(229, 229, 229, 0.14) !important; } .ux-command__item.is-active { border-top-color: rgba(229, 229, 229, 0.62) !important; border-right-color: rgba(229, 229, 229, 0.62) !important; border-bottom-color: rgba(229, 229, 229, 0.62) !important; border-left-color: rgba(229, 229, 229, 0.62) !important; background-color: rgba(229, 229, 229, 0.14) !important; } .stat-card::after { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.16), transparent 70%) !important; } .stat-card:hover { border-top-color: rgba(229, 229, 229, 0.4) !important; border-right-color: rgba(229, 229, 229, 0.4) !important; border-bottom-color: rgba(229, 229, 229, 0.4) !important; border-left-color: rgba(229, 229, 229, 0.4) !important; } .seo-glow--1 { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.5), transparent 70%) !important; } .seo-particle { background-color: #e5e5e5 !important; box-shadow: rgba(229, 229, 229, 0.9) 0px 0px 12px !important; } .seo-path { filter: drop-shadow(rgba(229, 229, 229, 0.55) 0px 0px 10px) !important; } .seo-dots circle:nth-child(5) { fill: #e5e5e5 !important; } .seo-arrow { filter: drop-shadow(rgba(229, 229, 229, 0.8) 0px 0px 8px) !important; } .seo-boom-dot { background-color: #e5e5e5 !important; box-shadow: rgba(229, 229, 229, 0.9) 0px 0px 14px !important; } .seo-boom-title em { background-image: linear-gradient(100deg, #0a0a0a 0%, #e5e5e5 55%, #e5e5e5 100%) !important; } .stat-band::after { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.22), transparent 68%) !important; } .showcase::after { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.22), transparent 68%) !important; } .split-cta-card::after { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.22), transparent 68%) !important; } .services-section::before { background-image: radial-gradient(circle, rgba(10, 10, 10, 0.09), transparent 66%) !important; } .market-section::before { background-image: radial-gradient(circle, rgba(10, 10, 10, 0.09), transparent 66%) !important; } .featured-services::before { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.1), transparent 66%) !important; } .agency-process::before { background-image: radial-gradient(circle, rgba(229, 229, 229, 0.1), transparent 66%) !important; } .results-line { filter: drop-shadow(rgba(229, 229, 229, 0.4) 0px 0px 8px) !important; } .results-arrow { filter: drop-shadow(rgba(229, 229, 229, 0.6) 0px 0px 6px) !important; } .service-card.featured:hover { box-shadow: rgba(10, 10, 10, 0.15) 0px 16px 48px !important; } .sf-bonus { background-color: rgba(229, 229, 229, 0.1) !important; border-top-color: rgba(229, 229, 229, 0.2) !important; border-right-color: rgba(229, 229, 229, 0.2) !important; border-bottom-color: rgba(229, 229, 229, 0.2) !important; border-left-color: rgba(229, 229, 229, 0.2) !important; border: 1px solid rgba(229, 229, 229, 0.2) !important; } .service-cart-btn:hover { background-color: rgba(10, 10, 10, 0.08) !important; } .btn-blue { box-shadow: rgba(10, 10, 10, 0.3) 0px 4px 16px !important; } .scroll-top:hover { box-shadow: rgba(10, 10, 10, 0.35) 0px 6px 24px !important; } .seo-tool-input:focus { box-shadow: rgba(10, 10, 10, 0.1) 0px 0px 0px 3px !important; } .seo-tool-textarea:focus { box-shadow: rgba(10, 10, 10, 0.1) 0px 0px 0px 3px !important; } .seo-tool-btn:hover { box-shadow: rgba(10, 10, 10, 0.3) 0px 4px 12px !important; } .showcase-title em { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; } .porque-yo h2 em { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; } .blog-title em { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; } .sec--dark h2 em { color: #0a0a0a !important; -webkit-text-fill-color: #0a0a0a !important; } .blog-kicker { color: #0a0a0a !important; } .sec-label { color: #0a0a0a !important; } .article-breadcrumb { color: #0a0a0a !important; } .article-meta { color: #0a0a0a !important; } .blog-card__meta { color: #0a0a0a !important; } .tech-strip-label { color: #0a0a0a !important; } .hero-badge::before { background-color: #0a0a0a !important; } .green { background-color: #0a0a0a !important; } .btn-primary { background-color: #0a0a0a !important; border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } .nav-cta { background-color: #0a0a0a !important; border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } .tool-btn { background-color: #0a0a0a !important; border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } .service-badge { background-color: #0a0a0a !important; border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } .quien-badge { background-color: #0a0a0a !important; border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } .mobile-cta__btn { background-color: #0a0a0a !important; border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } .btn-primary:hover { background-color: #000000 !important; border-top-color: #000000 !important; border-right-color: #000000 !important; border-bottom-color: #000000 !important; border-left-color: #000000 !important; } .nav-cta:hover { background-color: #000000 !important; border-top-color: #000000 !important; border-right-color: #000000 !important; border-bottom-color: #000000 !important; border-left-color: #000000 !important; } .tool-btn:hover { background-color: #000000 !important; border-top-color: #000000 !important; border-right-color: #000000 !important; border-bottom-color: #000000 !important; border-left-color: #000000 !important; } .mobile-cta__btn:hover { background-color: #000000 !important; border-top-color: #000000 !important; border-right-color: #000000 !important; border-bottom-color: #000000 !important; border-left-color: #000000 !important; } .btn-outline { border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; color: #0a0a0a !important; } .btn-ghost-white { border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; color: #0a0a0a !important; } .plan-btn-secondary { border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; color: #0a0a0a !important; } .sol-btn { border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; color: #0a0a0a !important; } .blog-tag { background-color: #f2f2f2 !important; color: #0a0a0a !important; border-top-color: #d4d4d4 !important; border-right-color: #d4d4d4 !important; border-bottom-color: #d4d4d4 !important; border-left-color: #d4d4d4 !important; } .blog-filter { background-color: #f2f2f2 !important; color: #0a0a0a !important; border-top-color: #d4d4d4 !important; border-right-color: #d4d4d4 !important; border-bottom-color: #d4d4d4 !important; border-left-color: #d4d4d4 !important; } .internal-links__head span { background-color: #f2f2f2 !important; color: #0a0a0a !important; border-top-color: #d4d4d4 !important; border-right-color: #d4d4d4 !important; border-bottom-color: #d4d4d4 !important; border-left-color: #d4d4d4 !important; } .internal-link-card span { background-color: #f2f2f2 !important; color: #0a0a0a !important; border-top-color: #d4d4d4 !important; border-right-color: #d4d4d4 !important; border-bottom-color: #d4d4d4 !important; border-left-color: #d4d4d4 !important; } .blog-filter.is-active { background-color: #0a0a0a !important; border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; } .article-progress { background-color: #0a0a0a !important; } .article-callout { border-left-color: #0a0a0a !important; background-color: #f2f2f2 !important; } .hero { border-bottom-color: #f2f2f2 !important; } .hero-title em { background-image: linear-gradient(95deg, #0a0a0a, rgb(8, 145, 178) 52%, rgb(22, 163, 74)) !important; } .stat-band::before { background-image: linear-gradient(rgba(10, 10, 10, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 116, 144, 0.043) 1px, transparent 1px) !important; } .showcase::before { background-image: linear-gradient(rgba(10, 10, 10, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 116, 144, 0.043) 1px, transparent 1px) !important; } .porque-yo::before { background-image: linear-gradient(rgba(10, 10, 10, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 116, 144, 0.043) 1px, transparent 1px) !important; } .blog-home::before { background-image: linear-gradient(rgba(10, 10, 10, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(14, 116, 144, 0.043) 1px, transparent 1px) !important; } .showcase-kicker { color: #0a0a0a !important; } .blog-home .blog-kicker { color: #0a0a0a !important; } .blog-home .blog-tag { background-color: #f2f2f2 !important; color: #0a0a0a !important; } .blog-home .blog-card__link { color: #0a0a0a !important; } .seo-metric strong { background-image: linear-gradient(rgb(15, 23, 42), #0a0a0a) !important; } .seo-metric .seo-metric-num { background-image: linear-gradient(rgb(15, 23, 42), #0a0a0a) !important; } .hero .btn-primary { box-shadow: rgba(229, 229, 229, 0.28) 0px 20px 48px !important; } .hero-trust a:hover { border-top-color: rgba(229, 229, 229, 0.45) !important; border-right-color: rgba(229, 229, 229, 0.45) !important; border-bottom-color: rgba(229, 229, 229, 0.45) !important; border-left-color: rgba(229, 229, 229, 0.45) !important; background-color: rgba(229, 229, 229, 0.12) !important; } .growth-preview { background-image: linear-gradient(135deg, rgba(229, 229, 229, 0.15), rgba(163, 230, 53, 0.07)), initial !important; } .nav-drop a:hover { color: #0a0a0a !important; } .nav-drop a:focus-visible { color: #0a0a0a !important; } .service-card--reco { border-top-color: #0a0a0a !important; border-right-color: #0a0a0a !important; border-bottom-color: #0a0a0a !important; border-left-color: #0a0a0a !important; box-shadow: rgba(10, 10, 10, 0.22) 0px 26px 70px !important; } .service-card--reco::before { background-image: linear-gradient(90deg, #e5e5e5, #0a0a0a, #0a0a0a) !important; } .service-card--reco .service-icon { background-color: #f2f2f2 !important; } .service-card--reco .service-icon::after { background-image: linear-gradient(135deg, #0a0a0a, #e5e5e5) !important; } .service-card--reco h3 { color: #0a0a0a !important; } .service-card--reco .btn-service--featured { box-shadow: rgba(10, 10, 10, 0.35) 0px 12px 30px !important; } .service-badge--reco { box-shadow: rgba(10, 10, 10, 0.4) 0px 6px 16px !important; background-image: linear-gradient(90deg, #0a0a0a, #e5e5e5) !important; } .service-custom { background-image: linear-gradient(135deg, rgb(11, 18, 32) 0%, rgb(17, 31, 58) 55%, #000000 130%) !important; } .service-custom::before { background-image: linear-gradient(90deg, #e5e5e5, #0a0a0a, rgb(124, 58, 237)) !important; } .service-custom__tag { color: #e5e5e5 !important; } .service-custom__list li::before { color: #e5e5e5 !important; } .service-custom__btn { background-image: linear-gradient(90deg, #0a0a0a, #e5e5e5) !important; } .hero-visual::before { background-image: radial-gradient(circle at 62% 42%, rgba(229, 229, 229, 0.4), transparent 68%) !important; } .article-page .dtw-respuesta { background: var(--blue-light, #f2f2f2) !important; } .article-page .dtw-tabla thead th { background: var(--blue-light, #f2f2f2) !important; color: var(--blue-dark, #000000) !important; } .article-page .dtw-cta-boton { background: var(--blue, #0a0a0a) !important; } .article-page .dtw-respuesta a { color: #000000 !important; } .article-page .dtw-quien a { color: #000000 !important; } .article-page .dtw-cta-articulo a:not(.dtw-cta-boton) { color: #000000 !important; } .blog-index .dtw-quien a { color: #000000 !important; } .article-page .dtw-quien { border-left-color: #0a0a0a !important; } .blog-index .dtw-quien { border-left-color: #0a0a0a !important; } body.dtw-corp { --c-blue: #0a0a0a !important; --c-blue-deep: #000000 !important; --c-blue-wash: #f2f2f2 !important; } .dtw-form-via { background-color: #0a0a0a !important; } .dtw-form-via:hover { background-color: #000000 !important; } body.dtw-corp .service-card--pedido { box-shadow: rgba(10, 10, 10, 0.13) 0px 18px 44px !important; } /* GENERADO:FIN */