/* ═══════════════════════════════════════════════════════════════════════ RIVEL · DESIGN DNA Alinea la web con RIVEL OS, el producto. El hallazgo que gobierna esta hoja: la app no tiene un color de acento. Tiene UN COLOR POR CAPA DEL SISTEMA. Mission Core (estrategia) es violeta, Task Matrix (ejecucion tactica) es cian, Sprint Chamber (ciclos) es ambar, las misiones activas son verdes y la accion critica es naranja. Es decir: el producto ya codifica cromaticamente el bucle Direccion → Estado → Decision → Ejecucion → Evidencia. La web llevaba meses intentando explicar con adjetivos lo que la app demuestra con hues. Aqui el color pasa a ser el argumento. Se carga DESPUES de la hoja de cada pagina. El lienzo esta escrito a pelo como #050505 en cinco hojas distintas; unificarlo desde un solo sitio evita las costuras que aparecen cuando una queda desincronizada. ═══════════════════════════════════════════════════════════════════════ */ :root { /* ── EL CAMPO ────────────────────────────────────────────────────── La app no usa negro puro: usa un azul muy profundo, con un haz diagonal indigo cruzando y un bloom cian abajo. El salto desde #050505 es deliberadamente pequeño: se siente, no se nota. */ --rg-field: #05070f; --rg-field-raise: #0a0e1a; /* superficie de tarjeta elevada */ --rg-field-line: #ffffff14; /* hairline de tarjeta */ --rg-beam: #2b3fd9; /* haz diagonal indigo */ --rg-bloom: #0e7490; /* bloom cian inferior */ /* ── UNA CAPA DEL BUCLE, UN HUE ──────────────────────────────────── -ink es el hue puro (fondos, bordes, glows). -lit es la version aclarada para TEXTO sobre campo oscuro: todas superan 4.5:1 sobre --rg-field, que es el minimo AA. */ --rg-direction-ink: #9c43fe; --rg-direction-lit: #c9aaff; /* Dirección · objetivos, North Star, OKRs */ --rg-state-ink: #38bdf8; --rg-state-lit: #7dd3fc; /* Estado · SEECS, KPIs, caja, agenda */ --rg-decision-ink: #818cf8; --rg-decision-lit: #c7d2fe; /* Decisión · AXIOM, inteligencia */ --rg-execution-ink: #22d3ee; --rg-execution-lit: #a5f3fc; /* Ejecución · misiones, tareas, sprints */ --rg-evidence-ink: #34d399; --rg-evidence-lit: #a7f3d0; /* Evidencia · progreso, resultados */ --rg-cycle-ink: #f5a524; --rg-cycle-lit: #fcd34d; /* Ciclo · tiempo, rachas, sprints */ --rg-action-ink: #f97316; --rg-action-lit: #fdba74; /* Acción · la siguiente accion critica */ } /* Cada hoja de pagina define su propia variable de lienzo, y ya habian derivado en TRES colores distintos: #050505 (home, blog, about), #000 (features, faq) y #030304 (verticales). Se reapuntan todas al campo unico. OJO con el portador: home-pro-sections y studio-os NO declaran su token en :root sino sobre .hps / .so. Una custom property declarada sobre el propio elemento gana SIEMPRE a la heredada desde :root, sin importar el orden de carga. Por eso hay que repetir el mismo selector, no basta con :root. */ :root { --rvb-bg: var(--rg-field); /* blog */ --rva-bg: var(--rg-field); /* about */ --rvf-bg: var(--rg-field); /* features */ --rvq-bg: var(--rg-field); /* faq */ --rv-bg: var(--rg-field); /* pricing */ --rvv-bg: var(--rg-field); /* verticales (rv-vertical) */ } .hps, .hps-hero, .hps-proof { --hps-bg: var(--rg-field); } .so { --so-bg: var(--rg-field); } /* El lleva un style inline como guardia anti-flash antes de que cargue el CSS. Un atributo inline gana a cualquier hoja, asi que aqui hace falta !important. El atributo tambien se actualiza en el HTML por scripts/inject-design-dna.mjs; esto es el cinturon, no los tirantes. */ html, body, body.body, body.cs-page { background-color: var(--rg-field) !important; } /* Dark Veil (React Bits) sits fixed behind the page. Canvas sections must stay transparent or they paint a slab over the shader. Body keeps --rg-field as the fallback before WebGL starts. */ .rg-dark-veil { position: fixed; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } .rg-dark-veil__canvas { display: block; width: 100%; height: 100%; } html.rg-has-dark-veil .hps, html.rg-has-dark-veil .hps-hero, html.rg-has-dark-veil .hps-proof, html.rg-has-dark-veil .hps-contact, html.rg-has-dark-veil .hps-legal, html.rg-has-dark-veil .cs-page, html.rg-has-dark-veil .rv-about-section, html.rg-has-dark-veil .rv-features-section, html.rg-has-dark-veil .rv-faq-section, html.rg-has-dark-veil .rv-blog-section, html.rg-has-dark-veil .rv-article-section, html.rg-has-dark-veil .rv-pricing-section, html.rg-has-dark-veil .rv-vertical-section, html.rg-has-dark-veil .so { background: transparent !important; background-color: transparent !important; background-image: none !important; } html.rg-has-dark-veil .rv-about-section::before, html.rg-has-dark-veil .rv-features-section::before, html.rg-has-dark-veil .rv-faq-section::before, html.rg-has-dark-veil .rv-blog-section::before, html.rg-has-dark-veil .rv-article-section::before, html.rg-has-dark-veil .rv-pricing-section::before, html.rg-has-dark-veil .rv-vertical-section::before { display: none; } html.rg-has-dark-veil body, html.rg-has-dark-veil body.body, html.rg-has-dark-veil body.cs-page { background-color: transparent !important; isolation: isolate; } /* Un solo sitio decide el lienzo. Sin esto, cinco hojas con el mismo literal se desincronizan y aparece una banda mas oscura en la costura. Footer stays transparent on that canvas — an opaque slab here cuts the vision orb and a sliver of the section above it. */ html, body, body.body { background-color: var(--rg-field); } .rg-footer, .rg-footer-main, .rg-footer-top { background-color: transparent; background-image: none; } .rg-footer { overflow: visible; } /* Old looping footer video fights Dark Veil. Strategy Lab hides its own .footer-bg-video when the veil is mounted (see below). */ .rg-footer-bg-video { display: none !important; } /* ── MICRO-ETIQUETA ───────────────────────────────────────────────── El patron mas reconocible de la app: MODO, ALCANCE, LÓGICA, EXPERIENCIA, SIGUIENTE ACCIÓN. Mono, versalita, racionada. */ .rg-microlabel { display: inline-flex; align-items: center; gap: .45rem; font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ffffff8c; } .rg-microlabel::before { content: ''; width: .375rem; height: .375rem; border-radius: 50%; background: currentColor; opacity: .8; } .rg-microlabel[data-layer]::before { background: var(--layer-ink); opacity: 1; } /* ── PORTADOR DE CAPA ─────────────────────────────────────────────── Un solo atributo tiñe todo lo que cuelga: data-layer="state". Asi el color se declara una vez y no se repite hue a hue por regla. */ [data-layer="direction"] { --layer-ink: var(--rg-direction-ink); --layer-lit: var(--rg-direction-lit); } [data-layer="state"] { --layer-ink: var(--rg-state-ink); --layer-lit: var(--rg-state-lit); } [data-layer="decision"] { --layer-ink: var(--rg-decision-ink); --layer-lit: var(--rg-decision-lit); } [data-layer="execution"] { --layer-ink: var(--rg-execution-ink); --layer-lit: var(--rg-execution-lit); } [data-layer="evidence"] { --layer-ink: var(--rg-evidence-ink); --layer-lit: var(--rg-evidence-lit); } [data-layer="cycle"] { --layer-ink: var(--rg-cycle-ink); --layer-lit: var(--rg-cycle-lit); } [data-layer="action"] { --layer-ink: var(--rg-action-ink); --layer-lit: var(--rg-action-lit); } /* ── TARJETA DE SISTEMA ───────────────────────────────────────────── El sufijo -card es OBLIGATORIO: js/rivel-motion.js selecciona por [class*="-card"] para animar la entrada. Sin ese sufijo el bloque se queda invisible y no hay error en consola. */ .rg-sys-card { position: relative; padding: 1.5rem; border-radius: 16px; background: var(--rg-field-raise); border: 1px solid var(--rg-field-line); overflow: hidden; } .rg-sys-card[data-layer] { border-color: color-mix(in oklab, var(--layer-ink) 28%, transparent); } .rg-sys-card[data-layer]::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, var(--layer-ink), transparent); opacity: .55; } .rg-sys-card__tile { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: 12px; margin-bottom: 1rem; color: var(--layer-lit, #fff); background: color-mix(in oklab, var(--layer-ink, #fff) 16%, transparent); border: 1px solid color-mix(in oklab, var(--layer-ink, #fff) 30%, transparent); } .rg-sys-card__title { font-weight: 600; letter-spacing: -.01em; margin: 0 0 .35rem; } .rg-sys-card__meta { color: #ffffffa6; font-size: .9375rem; line-height: 1.5; margin: 0; } /* ── EL BUCLE ─────────────────────────────────────────────────────── La representacion canonica de Direccion → Estado → Decision → Ejecucion → Evidencia → Aprendizaje → Nuevo estado. Cada paso lleva su hue, el mismo que ese dominio tiene en la app. */ .rg-loop { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; } @media (min-width: 900px) { .rg-loop { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } .rg-loop__step { position: relative; padding: 1.125rem 1.25rem; border-radius: 14px; background: var(--rg-field-raise); border: 1px solid color-mix(in oklab, var(--layer-ink, #fff) 22%, var(--rg-field-line)); } .rg-loop__step::after { content: ''; position: absolute; left: 1.25rem; top: 0; width: 2.25rem; height: 2px; border-radius: 2px; background: var(--layer-ink, #fff); } .rg-loop__name { display: block; font-weight: 600; letter-spacing: -.01em; color: var(--layer-lit, #fff); margin-bottom: .3rem; } .rg-loop__what { color: #ffffffa6; font-size: .9375rem; line-height: 1.5; } /* ── STAT TILE ────────────────────────────────────────────────────── Cifra grande, etiqueta mono debajo. Igual que la app. Uso obligado: toda cifra publicada lleva su metodo en __method. */ .rg-stat { display: grid; gap: .3rem; } .rg-stat__value { font-family: 'PP Neue Machina', 'Space Grotesk', system-ui, sans-serif; font-size: clamp(1.9rem, 4vw, 2.75rem); font-weight: 600; line-height: 1; letter-spacing: -.02em; color: var(--layer-lit, #fff); } .rg-stat__label { font-family: 'JetBrains Mono', 'Geist Mono', ui-monospace, monospace; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #ffffff8c; } /* Sin metodo, una cifra lee como marketing aunque sea cierta. */ .rg-stat__method { font-size: .8125rem; line-height: 1.45; color: #ffffff73; } /* ── BACKDROPS ────────────────────────────────────────────────────── El haz diagonal y el bloom de la app, como capas decorativas. NUNCA pongas fondo propio ni overflow:hidden en la seccion del hero: corta el glow del orbe y dibuja una costura recta contra el lienzo. Por eso esto es ::before absoluto sobre fondo transparente. */ .rg-beamed { position: relative; overflow-x: clip; overflow-y: visible; } .rg-beamed::before { content: ''; position: absolute; inset: -20% -10% auto -10%; height: 140%; pointer-events: none; z-index: 0; background: linear-gradient(196deg, transparent 34%, color-mix(in oklab, var(--rg-beam) 26%, transparent) 47%, transparent 62%), radial-gradient(60% 42% at 50% 108%, color-mix(in oklab, var(--rg-bloom) 30%, transparent), transparent 72%); filter: blur(38px); opacity: .5; } .rg-beamed > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: reduce) { .rg-beamed::before { filter: blur(48px); opacity: .34; } } /* En tactil el scroll es 100% nativo y no cargamos WebGL. El backdrop se aligera para no pagar un blur enorme en GPUs moviles. */ @media (pointer: coarse) { .rg-beamed::before { filter: blur(26px); opacity: .38; } } /* ── EL BUCLE EN EL HOME ──────────────────────────────────────────── Las siete tarjetas del bucle reutilizan .hps-pillar y se tiñen con data-layer. El hue va donde lo pone la app: en el tile del numero, no en el titulo (en el dashboard los titulos de modulo son blancos y el color lo carga el icono) y NUNCA en ::before, que es el degradado holo de marca y no se toca. La capa "state" sale dos veces a proposito: en el paso 02 y en el 07, Nuevo estado. El bucle vuelve a su inicio y el color lo dice sin texto. */ .hps-pillar[data-layer] .hps-pillar__num { color: var(--layer-lit); background: color-mix(in oklab, var(--layer-ink) 18%, transparent); border: 1px solid color-mix(in oklab, var(--layer-ink) 34%, transparent); } .hps-pillar[data-layer] .hps-pillar__media { background: radial-gradient(120% 90% at 18% 0%, color-mix(in oklab, var(--layer-ink) 15%, transparent), transparent 68%); } .hps-pillar[data-layer] { transition: border-color .35s ease, background-color .35s ease; } .hps-pillar[data-layer]:hover { border-color: color-mix(in oklab, var(--layer-ink) 40%, transparent); } /* Fallback para navegadores sin color-mix (Safari < 16.4). Sin esto el tile se queda sin fondo y el numero pierde contraste. */ @supports not (color: color-mix(in oklab, red 50%, transparent)) { .hps-pillar[data-layer] .hps-pillar__num { color: var(--layer-lit); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .18); } .hps-pillar[data-layer] .hps-pillar__media { background: none; } } /* Con siete pasos en una rejilla de cuatro columnas, la segunda fila deja un hueco a la derecha. En vez de disimularlo, se usa: el septimo paso es "Nuevo estado", el que cierra el bucle, asi que ocupa el doble de ancho y la fila queda completa (1 + 1 + 2 = 4). El desequilibrio pasa a ser enfasis. Solo a partir de 4 columnas; por debajo la rejilla ya reflowea sola. */ @media (min-width: 1100px) { #loop .hps-pillars > .hps-pillar:nth-child(7) { grid-column: span 2; } #loop .hps-pillars > .hps-pillar:nth-child(7) .hps-pillar__body { max-width: 46ch; } } /* ── STRATEGY LAB: MISMO CAMPO, HUE CIAN ─────────────────────────── `body.rv-motion-custom` existe solo en strategy-lab.html y su espejo ES. Antes era un tema Webflow claro. Ahora monta el mismo Dark Veil que rivelcompanies, corrido a azul (hueShift 20). El lienzo se vuelve transparente. Las tarjetas elevadas conservan superficie e tinta oscura. El tipo que se sienta en el campo se voltea a claro. El blanco de abajo es solo el fallback pre-WebGL. */ html:has(body.rv-motion-custom), body.rv-motion-custom { background-color: #fff !important; } html.rg-has-dark-veil:has(body.rv-motion-custom), html.rg-has-dark-veil body.rv-motion-custom { background-color: transparent !important; } html.rg-has-dark-veil body.rv-motion-custom .page-wrapper, html.rg-has-dark-veil body.rv-motion-custom .main-wrapper, html.rg-has-dark-veil body.rv-motion-custom .section, html.rg-has-dark-veil body.rv-motion-custom .section.hero, html.rg-has-dark-veil body.rv-motion-custom .section.about, html.rg-has-dark-veil body.rv-motion-custom .section.faq, html.rg-has-dark-veil body.rv-motion-custom .section.utility, html.rg-has-dark-veil body.rv-motion-custom .hero-bg, html.rg-has-dark-veil body.rv-motion-custom .logo-marquee-section, html.rg-has-dark-veil body.rv-motion-custom .footer, html.rg-has-dark-veil body.rv-motion-custom .footer-top, html.rg-has-dark-veil body.rv-motion-custom .footer-bottom, html.rg-has-dark-veil body.rv-motion-custom .footer-main { background: transparent !important; background-color: transparent !important; background-image: none !important; } html.rg-has-dark-veil body.rv-motion-custom .footer-bg-video { display: none !important; } /* Titulares y ledes que se sientan en el campo, no dentro de una card. */ html.rg-has-dark-veil body.rv-motion-custom .heading-style-h1, html.rg-has-dark-veil body.rv-motion-custom .heading-style-h2, html.rg-has-dark-veil body.rv-motion-custom .heading-style-h3, html.rg-has-dark-veil body.rv-motion-custom .heading-style-h4, html.rg-has-dark-veil body.rv-motion-custom .heading-style-h5, html.rg-has-dark-veil body.rv-motion-custom .heading-style-h6, html.rg-has-dark-veil body.rv-motion-custom .about-text { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .subheading-text, html.rg-has-dark-veil body.rv-motion-custom .intergration-bottom-text, html.rg-has-dark-veil body.rv-motion-custom .faqs-cta-text { color: rgba(255, 255, 255, .68); } html.rg-has-dark-veil body.rv-motion-custom .subheading-text.on-cta-card { color: var(--_color---white--02); } html.rg-has-dark-veil body.rv-motion-custom .eye-brow-text { color: rgba(255, 255, 255, .82); } html.rg-has-dark-veil body.rv-motion-custom .eye-brow-number { color: rgba(255, 255, 255, .55); -webkit-text-stroke-color: rgba(255, 255, 255, .28); } html.rg-has-dark-veil body.rv-motion-custom .eye-brow-dot { background-color: rgba(255, 255, 255, .7); } html.rg-has-dark-veil body.rv-motion-custom .intergration-item-title { color: #1a1a1a; } html.rg-has-dark-veil body.rv-motion-custom .pricing-tab-link { color: rgba(255, 255, 255, .55); } html.rg-has-dark-veil body.rv-motion-custom .pricing-tab-link.w--current { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .team-card-name { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .team-card-position { color: rgba(255, 255, 255, .68); } html.rg-has-dark-veil body.rv-motion-custom .faq-item-question { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .faq-item-answer-text { color: rgba(255, 255, 255, .68); } html.rg-has-dark-veil body.rv-motion-custom .faq-item-number { color: #0a0a0a; } /* Nav dock: same island as rivelcompanies (X + Menu/lang/CTA). */ body.rv-motion-custom .navbar-brand-link.rg-navbar-brand-link.rg-glass, body.rv-motion-custom .navbar-brand-link.rg-navbar-brand-link.rg-glass:hover { background-image: none; } body.rv-motion-custom .navbar-actions.rg-navbar-actions { height: 3.5rem; align-items: center; gap: 0.55rem; padding: 0.22rem 0.22rem 0.22rem 1.1rem; overflow: hidden; } body.rv-motion-custom .navbar-actions .nav_menu-button, body.rv-motion-custom .navbar-actions .nav_menu-button-layout { color: rgba(255, 255, 255, .94); } body.rv-motion-custom .navbar-actions .nav_menu-button { display: flex !important; float: none; font-size: inherit; padding: 0; } body.rv-motion-custom .navbar-actions .sl-lang-switch, body.rv-motion-custom .navbar-actions .rg-lang-switch { color: rgba(255, 255, 255, .74); font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; padding: 0.4rem 0.65rem; margin-right: 0; border-radius: 100vw; background: transparent; } body.rv-motion-custom .navbar-actions .sl-lang-switch:hover, body.rv-motion-custom .navbar-actions .rg-lang-switch:hover { color: #fff; background: rgba(255, 255, 255, .1); } body.rv-motion-custom .navbar-actions .rg-cta-button { display: flex !important; align-items: center; justify-content: center; align-self: stretch; gap: 0.5rem; min-height: 0; height: auto; border: 0; border-radius: inherit; background-image: none; background-color: rgba(255, 255, 255, .94); color: #1a1a1a; font-size: 0.875rem; font-weight: 500; text-decoration: none !important; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .14); padding: 0 1.15rem; } body.rv-motion-custom .navbar-actions .rg-cta-button:hover { background-color: #fff; } body.rv-motion-custom .navbar-actions .rg-cta-button svg { width: 16px; height: 16px; stroke: #1a1a1a; flex: none; } @media screen and (max-width: 479px) { body.rv-motion-custom .navbar-actions.rg-navbar-actions { height: 2.75rem; gap: 0.4rem; padding: 0.16rem 0.16rem 0.16rem 0.85rem; } } /* Value cards sit on the veil: only the outer shell goes clear. */ html.rg-has-dark-veil body.rv-motion-custom .value-card { background: transparent !important; background-color: transparent !important; border-color: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); } html.rg-has-dark-veil body.rv-motion-custom .value-card-title { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .value-card-desc { color: rgba(255, 255, 255, .68); } /* Service cards: same liquid glass as home pillars. */ body.rv-motion-custom .capabilities-card.rg-glass, body.rv-motion-custom .capabilities-card.rg-glass:hover { background-image: none; border-color: rgba(255, 255, 255, .18); } html.rg-has-dark-veil body.rv-motion-custom .capabilities-card-title { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .capabilities-card-content, html.rg-has-dark-veil body.rv-motion-custom .capabilities-card-subtitle, html.rg-has-dark-veil body.rv-motion-custom .capabilities-card-content-text { color: rgba(255, 255, 255, .68); } /* Process, cases, quotes, pricing, FAQ: same glass panels. */ body.rv-motion-custom .process-item.rg-glass, body.rv-motion-custom .casestudy-card.rg-glass, body.rv-motion-custom .intergration-circle.rg-glass, body.rv-motion-custom .testimonial-card.rg-glass, body.rv-motion-custom .pricing-table.rg-glass, body.rv-motion-custom .faq-item-inner.rg-glass, body.rv-motion-custom .cta-form-card.rg-glass { background-image: none; border-color: rgba(255, 255, 255, .18); } body.rv-motion-custom .process-item.rg-glass { overflow: visible; } html.rg-has-dark-veil body.rv-motion-custom .process-item.process-line-hide-top, html.rg-has-dark-veil body.rv-motion-custom .process-item.process-line-hide-bottom { background: transparent !important; background-color: transparent !important; background-image: none !important; box-shadow: none !important; border: 0 !important; opacity: 0 !important; pointer-events: none; } html.rg-has-dark-veil body.rv-motion-custom .process-line-ray { background-color: rgba(255, 255, 255, .14); } html.rg-has-dark-veil body.rv-motion-custom .process-item-title, html.rg-has-dark-veil body.rv-motion-custom .casestudy-card-title, html.rg-has-dark-veil body.rv-motion-custom .casestudy-card-number, html.rg-has-dark-veil body.rv-motion-custom .testimonial-default-name { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .process-item-desc, html.rg-has-dark-veil body.rv-motion-custom .casestudy-card-desc, html.rg-has-dark-veil body.rv-motion-custom .casestudy-card-number-title, html.rg-has-dark-veil body.rv-motion-custom .testimonial-default-info, html.rg-has-dark-veil body.rv-motion-custom .testimonial-default-text { color: rgba(255, 255, 255, .68); } html.rg-has-dark-veil body.rv-motion-custom .casestudy-card-brand-logo { filter: invert(1) brightness(1.15); } html.rg-has-dark-veil body.rv-motion-custom .casestudy-card a, html.rg-has-dark-veil body.rv-motion-custom .casestudy-card a .button-inner, html.rg-has-dark-veil body.rv-motion-custom .casestudy-card a .button-text, html.rg-has-dark-veil body.rv-motion-custom .faqs-cta a.button, html.rg-has-dark-veil body.rv-motion-custom .faqs-cta a.button .button-inner, html.rg-has-dark-veil body.rv-motion-custom .faqs-cta a.button .button-text { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .casestudy-card .button-text:where(.w-variant-b2c15ccf-f3ee-7171-f43f-d5285af181db), html.rg-has-dark-veil body.rv-motion-custom .faqs-cta .button-text:where(.w-variant-b2c15ccf-f3ee-7171-f43f-d5285af181db) { color: #fff; text-shadow: 0 -2em 0 #fff; } html.rg-has-dark-veil body.rv-motion-custom .casestudy-card .button-icon:where(.w-variant-b2c15ccf-f3ee-7171-f43f-d5285af181db), html.rg-has-dark-veil body.rv-motion-custom .faqs-cta .button-icon:where(.w-variant-b2c15ccf-f3ee-7171-f43f-d5285af181db) { background-color: rgba(255, 255, 255, .16); color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .intergration-circle, html.rg-has-dark-veil body.rv-motion-custom .intergration-circle * { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) { color: rgba(255, 255, 255, .68); } html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-title, html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-price-wrap { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-subtitle, html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-period, html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-content-list-title, html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-content-list-text, html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-content-list-item, html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-decimal { color: rgba(255, 255, 255, .68); } html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-card-top { border-color: rgba(255, 255, 255, .12); } html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .button-text { color: #fff; text-shadow: 0 -2em 0 #fff; } html.rg-has-dark-veil body.rv-motion-custom .pricing-table .pricing-card:not(._02) .pricing-tag-inner { color: #1a1a1a; } html.rg-has-dark-veil body.rv-motion-custom .cta-form-card-heading, html.rg-has-dark-veil body.rv-motion-custom .cta-form-card .form-success-message-title { color: #fff; } html.rg-has-dark-veil body.rv-motion-custom .cta-form-card .subheading-text.on-cta-card { color: rgba(255, 255, 255, .68); } /* El titular holo y el CTA ghost del hero ya pedian campo oscuro. */ body.rv-motion-custom .hero-section-wrap .subheading-text, body.rv-motion-custom .hero-section-wrap .subheading-text.hero { color: rgba(255, 255, 255, .72) !important; } body.rv-motion-custom .hero-domains, body.rv-motion-custom .hero-domains * { color: rgba(255, 255, 255, .62) !important; } body.rv-motion-custom .hero-eye-brow, body.rv-motion-custom .hero-eye-brow * { color: rgba(255, 255, 255, .78) !important; } body.rv-motion-custom .hero-eye-brow { border-color: rgba(255, 255, 255, .2) !important; } /* ── GLASS SURFACE (React Bits → Apple liquid glass) ──────────────── Vanilla port of https://reactbits.dev/components/glass-surface Applied in place to the home chrome the founder marked: nav pills, hero CTAs, eyebrows, loop pillars, system cards, footer form. Chromium desktop gets the SVG displacement backdrop. Safari, Firefox, coarse pointers and reduced-transparency get the official CSS fallback. Shine is a real node — never ::before/::after — so .hps-status and .hps-pillar keep their existing pseudos. */ .rg-glass { --glass-frost: 0; --glass-saturation: 1; --glass-rim: inset 0 0 2px 1px rgba(255, 255, 255, .35), inset 0 0 10px 4px rgba(255, 255, 255, .14), inset 0 4px 16px rgba(17, 17, 26, .05), 0 8px 28px rgba(17, 17, 26, .12); position: relative; isolation: isolate; overflow: hidden; border-color: rgba(255, 255, 255, .18); will-change: auto; } .rg-glass__filter, .rg-glass__shine { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; border-radius: inherit; } .rg-glass__filter { z-index: -1; opacity: 0; overflow: hidden; } .rg-glass__shine { z-index: 1; background: linear-gradient( 165deg, rgba(255, 255, 255, .08) 0%, transparent 42% ); } .rg-glass > :not(.rg-glass__filter):not(.rg-glass__shine):not(.rg-beam__stroke):not(.rg-beam__glow):not(.rg-beam__bloom) { position: relative; z-index: 2; } .rg-glass__label { position: relative; z-index: 2; } .rg-glass--svg { background-image: none !important; background-color: hsl(0 0% 0% / var(--glass-frost, 0)) !important; -webkit-backdrop-filter: var(--filter-id) saturate(var(--glass-saturation)); backdrop-filter: var(--filter-id) saturate(var(--glass-saturation)); box-shadow: var(--glass-rim); } .rg-glass--svg.rg-glass--bright { background-color: hsl(0 0% 100% / var(--glass-frost, 0.68)) !important; color: #0a0a0a; } .rg-glass--fallback { background-image: none !important; background-color: hsl(0 0% 100% / calc(0.07 + var(--glass-frost, 0.08) * 0.45)) !important; -webkit-backdrop-filter: blur(5px) saturate(var(--glass-saturation, 1.15)); backdrop-filter: blur(5px) saturate(var(--glass-saturation, 1.15)); border: 1px solid rgba(255, 255, 255, .18); box-shadow: var(--glass-rim); } .rg-glass--fallback.rg-glass--chip, .rg-glass--fallback.rg-glass--dock { -webkit-backdrop-filter: blur(8px) saturate(1.25); backdrop-filter: blur(8px) saturate(1.25); } .rg-glass--fallback.rg-glass--bright { background-color: rgba(255, 255, 255, .84) !important; color: #0a0a0a; } .rg-glass--bright .rg-glass__shine { background: linear-gradient( 165deg, rgba(255, 255, 255, .45) 0%, transparent 48% ); } .rg-navbar-brand-link.rg-glass, .rg-navbar-brand-link.rg-glass:hover, .rg-navbar-actions.rg-glass { background-image: none; } .hps-btn--primary.rg-glass, .hps-btn--primary.rg-glass:hover { background-image: none; color: #0a0a0a; box-shadow: var(--glass-rim); } .hps-btn--ghost.rg-glass, .hps-btn--ghost.rg-glass:hover { background-image: none; border-color: rgba(255, 255, 255, .22); color: #fff; } .hps-eyebrow.rg-glass, .hps-status.rg-glass { background-image: none; overflow: visible; } .hps-status.rg-glass::before { position: relative; z-index: 2; } .hps-pillar.rg-glass, .hps-pillar.rg-glass:hover, .hps-system__card.rg-glass, .hps-system__card.rg-glass:hover, .capabilities-card.rg-glass, .capabilities-card.rg-glass:hover, .process-item.rg-glass, .casestudy-card.rg-glass, .intergration-circle.rg-glass, .testimonial-card.rg-glass, .pricing-table.rg-glass, .faq-item-inner.rg-glass, .cta-form-card.rg-glass { background-image: none; } .hps-pillar.rg-glass .hps-pillar__media { background-color: transparent; } .hps-pillar.rg-glass::before { z-index: 3; } .hps-system__card.rg-glass::after { z-index: 3; } .rg-cta-form-card.rg-glass, .cta-form-card.rg-glass { background-image: none !important; box-shadow: var(--glass-rim); } /* Inner nav CTA stays a solid chip on the glass dock — Apple pattern. */ .rg-navbar-actions.rg-glass .rg-cta-button { position: relative; z-index: 2; background-color: #fffc; } /* Dock island: one piece of glass, not three floating labels. */ .rg-navbar-actions.rg-glass--dock { height: 3.5rem; align-items: center; gap: 0.55rem; padding: 0.22rem 0.22rem 0.22rem 1.1rem; overflow: hidden; --glass-rim: inset 0 1px 0 rgba(255, 255, 255, .20), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 24px rgba(0, 0, 0, .22); } .rg-navbar-actions.rg-glass--dock .rg-glass__shine { background: linear-gradient( 180deg, rgba(255, 255, 255, .18) 0%, rgba(255, 255, 255, .04) 36%, transparent 64% ); } .rg-navbar-actions.rg-glass--dock .rg-menu-button, .rg-navbar-actions.rg-glass--dock .rg-menu-button-layout { color: rgba(255, 255, 255, .94); } .rg-navbar-actions.rg-glass--dock .rg-lang-switch { color: rgba(255, 255, 255, .74); font-size: 0.8125rem; font-weight: 600; letter-spacing: .06em; padding: 0.4rem 0.65rem; border-radius: 100vw; background: transparent; } .rg-navbar-actions.rg-glass--dock .rg-lang-switch:hover { color: #fff; background: rgba(255, 255, 255, .1); } .rg-navbar-actions.rg-glass--dock .rg-cta-button { display: flex !important; align-items: center; justify-content: center; gap: 0.5rem; align-self: stretch; height: auto; border: 0; background-color: rgba(255, 255, 255, .94); color: #1a1a1a; font-size: 0.875rem; font-weight: 500; text-decoration: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 1px 2px rgba(0, 0, 0, .14); padding: 0 1.15rem; } .rg-navbar-actions.rg-glass--dock .rg-cta-button:hover { background-color: #fff; } @media screen and (max-width: 479px) { .rg-navbar-actions.rg-glass--dock { height: 2.75rem; gap: 0.4rem; padding: 0.16rem 0.16rem 0.16rem 0.85rem; } } @media (pointer: coarse) { .rg-glass--chip, .rg-glass--dock, .rg-glass--panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(12, 14, 22, 0.82) !important; } .rg-glass--bright { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(255, 255, 255, 0.9) !important; } } @media (prefers-reduced-transparency: reduce) { .rg-glass--chip, .rg-glass--dock, .rg-glass--panel { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: rgba(12, 14, 22, 0.92) !important; } .rg-glass--bright { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background-color: #f4f4f4 !important; } }