/* ORACLE FIELD — Robinhood-vibes accent layer (subtle). Additive only: warm-neutral base preserved, green as accent + feather/gradient motif. Distinct motif position per route via [data-route] on . */ :root{ --rh-green:#00c805; /* Robinhood signature green */ --rh-green-deep:#00992f; --rh-teal:#314344; /* existing site accent, kept */ } /* fixed feather/gradient field OVER content (pointer-events none) so it tints the corners without being hidden by opaque hero backgrounds. Kept faint. */ #rh-vibes{ position:fixed; inset:0; z-index:9998; /* above page content, below nav (nav is z-1000+ but small) */ pointer-events:none; overflow:hidden; opacity:1; transition:opacity .6s ease; } #rh-vibes::before, #rh-vibes::after{ content:""; position:absolute; border-radius:50%; filter:blur(90px); will-change:transform,opacity; } /* primary green feather glow */ #rh-vibes::before{ width:52vw;height:52vw; right:-8vw;top:-10vw; background:radial-gradient(circle at 50% 50%, rgba(0,200,5,.16) 0%, rgba(0,200,5,.07) 42%, rgba(0,200,5,0) 70%); } /* secondary teal wash — grounds it so it doesn't read as pure crypto-neon */ #rh-vibes::after{ width:44vw;height:44vw; left:-10vw;bottom:-14vw; background:radial-gradient(circle at 50% 50%, rgba(49,67,68,.14) 0%, rgba(49,67,68,.05) 45%, rgba(49,67,68,0) 72%); } /* thin contour lines — Robinhood-style topographic feather, very faint */ #rh-vibes .rh-contour{ position:absolute; inset:0; background-image: radial-gradient(120% 90% at 85% 8%, rgba(0,200,5,.05) 0 1px, transparent 1px 100%), radial-gradient(120% 90% at 85% 8%, rgba(0,200,5,.04) 0 1px, transparent 1px 100%); background-size:100% 100%; opacity:.6; } /* per-route motif placement so each page feels distinct but consistent */ html[data-route="home"] #rh-vibes::before{ right:-8vw; top:-10vw; } html[data-route="home"] #rh-vibes::after{ left:-10vw; bottom:-14vw; } html[data-route="about"] #rh-vibes::before{ right:auto; left:-10vw; top:-6vw; width:46vw;height:46vw; } html[data-route="about"] #rh-vibes::after{ left:auto; right:-10vw; bottom:-10vw; } html[data-route="platform"] #rh-vibes::before{ right:-6vw; top:auto; bottom:-16vw; width:56vw;height:56vw; } html[data-route="platform"] #rh-vibes::after{ left:-6vw; top:-14vw; bottom:auto; } html[data-route="agentic"] #rh-vibes::before{ right:20vw; top:-16vw; width:48vw;height:48vw; } html[data-route="agentic"] #rh-vibes::after{ left:-12vw; bottom:0; width:40vw;height:40vw; } html[data-route="join"] #rh-vibes::before{ right:-4vw; top:30vh; width:44vw;height:44vw; } html[data-route="join"] #rh-vibes::after{ left:-8vw; top:-8vw; bottom:auto; } /* keep app content above the field */ #root{ position:relative; z-index:1; } /* ============================================================ RH SIGNATURE LAYER — make the Robinhood green actually FELT (green primary CTAs, green headline accent, green nav hover, green top hairline). Surgical selectors so dividers / opacity blacks (bg-black/5, /10, /15) are NOT touched. ============================================================ */ /* headline: the site sets `bg-gradient-to-r from-black to-[#314344]` on the WHOLE clipped-text headline. Tinting the gradient tail green turns the entire headline green (RH does the opposite: near-black type, green reserved for actions/one accent). So keep the headline ink-black and end it on a deep green so only the tail hints at brand. */ .to-\[\#314344\]{ --tw-gradient-to:#0d3b1a !important; } .from-\[\#314344\]{ --tw-gradient-from:var(--rh-green) !important; } /* small standalone accent labels keep the bright signature green */ .text-\[\#314344\]{ color:var(--rh-green-deep) !important; } /* PRIMARY CTA pill fill: the solid inner .bg-black plate -> RH green, with near-black text/icon on top (RH "Buy"-button look, ~10:1). */ .rounded-full.bg-black, .rounded-3xl > .bg-black, .rounded-full > .bg-black{ background-color:var(--rh-green) !important; } /* lift text/icons sitting on a greened pill to near-black for contrast */ a:has(> .rounded-full.bg-black), button:has(> .rounded-full.bg-black), a:has(.rounded-full.bg-black), button:has(.rounded-full.bg-black){ color:#0a0a0b !important; } a:has(.rounded-full.bg-black) svg, button:has(.rounded-full.bg-black) svg{ color:#0a0a0b !important; } /* the two dark 3xl CTAs (Create / Follow) use text-[#e0e0e0] on a dark ground — give them a green fill + dark text so they read as RH actions. The visible dark fill is an ABSOLUTE z-[1] span painted with a linear-gradient (#333->#0d0d0d->#262626), NOT bg-black — so we override that inner gradient span, not the button bg. Text/icon sit at z-[2]. */ a.rounded-3xl.text-\[\#e0e0e0\], button.rounded-3xl.text-\[\#e0e0e0\], .rounded-3xl.text-\[\#e0e0e0\]{ color:#0a0a0b !important; box-shadow:0 8px 24px -8px rgba(0,200,5,.55) !important; } /* the inner gradient plate -> flat RH green */ .rounded-3xl.text-\[\#e0e0e0\] > span.absolute.z-\[1\]{ background-image:none !important; background-color:var(--rh-green) !important; } /* hide the grey border-gradient hairlines so the pill reads as one green chip */ .rounded-3xl.text-\[\#e0e0e0\] > .border-gradient-top, .rounded-3xl.text-\[\#e0e0e0\] > .border-gradient-bottom{ opacity:0 !important; } .rounded-3xl.text-\[\#e0e0e0\] .relative.z-\[2\], .rounded-3xl.text-\[\#e0e0e0\] svg{ color:#0a0a0b !important; } /* nav items: green on hover/active */ nav a:hover, header a:hover, nav button:hover, header button:hover{ color:var(--rh-green-deep) !important; } /* small circular brand dot .rounded-full.bg-black already greened above; keep the logo badge itself black (it is .bg-black without rounded-full on a squarer radius) — do nothing to plain .bg-black used as logo plate */ /* RH green top hairline across the viewport (signature ticker rail) */ #rh-vibes::before,#rh-vibes::after{ /* existing glows below */ } html::after{ content:""; position:fixed; left:0; right:0; top:0; height:3px; background:linear-gradient(90deg,var(--rh-green) 0%,var(--rh-green-deep) 60%,rgba(0,200,5,0) 100%); z-index:10000; pointer-events:none; } /* amp the ambient green feather so the brand color is present, not invisible */ #rh-vibes::before{ background:radial-gradient(circle at 50% 50%, rgba(0,200,5,.30) 0%, rgba(0,200,5,.13) 42%, rgba(0,200,5,0) 70%) !important; } @media (prefers-reduced-motion: no-preference){ #rh-vibes::before{ animation:rh-float-a 18s ease-in-out infinite alternate; } #rh-vibes::after{ animation:rh-float-b 22s ease-in-out infinite alternate; } } @keyframes rh-float-a{ from{transform:translate3d(0,0,0)} to{transform:translate3d(-3vw,3vh,0)} } @keyframes rh-float-b{ from{transform:translate3d(0,0,0)} to{transform:translate3d(3vw,-2vh,0)} }