/* x402hood — Robinhood Chain theme (lime #CCFF00 / black ink)
Unlayered stylesheet: wins over Tailwind's @layer utilities by cascade rules. */
:root {
--hood: #CCFF00;
--hood-ink: #000000;
--background: #CCFF00;
--foreground: #000000;
--w3m-accent: #CCFF00 !important;
--apkt-colors-accent100: #CCFF00 !important;
}
body { background-color: var(--hood); color: var(--hood-ink); }
/* force light UA chrome: no dark scrollbars / dark overscroll, in any OS theme */
html { background: var(--hood); color-scheme: light; }
@media (prefers-color-scheme: dark) {
html, body { background: var(--hood) !important; color: var(--hood-ink) !important; }
}
/* "What is x402hood?" — full-width statement section (right mockup column removed) */
section:has(.reveal-word) .grid {
grid-template-columns: 1fr !important;
gap: 0 !important;
}
section:has(.reveal-word) .grid > div:first-child {
max-width: 56rem;
margin: 0 auto;
text-align: center;
}
section:has(.reveal-word) h2 {
font-size: clamp(2.25rem, 4.5vw, 3.5rem);
line-height: 1.1;
}
section:has(.reveal-word) p {
font-size: clamp(1.35rem, 2.2vw, 1.75rem);
line-height: 1.55;
}
/* ---------- page chrome: lime ---------- */
.bg-\[\#0a0a0a\] { background-color: var(--hood); }
.bg-\[\#0a0a0a\]\/98 { background-color: rgba(204, 255, 0, 0.98); }
/* default ink: black */
.text-white { color: var(--hood-ink); }
.text-white\/70 { color: rgba(0, 0, 0, 0.72); }
.text-white\/50 { color: rgba(0, 0, 0, 0.58); }
.text-white\/40 { color: rgba(0, 0, 0, 0.52); }
.text-white\/30 { color: rgba(0, 0, 0, 0.45); }
.text-\[\#999\], .text-\[\#999999\] { color: #2e3300; }
.text-\[\#777777\], .text-\[\#6C6C6C\] { color: #333a00; }
.text-\[\#555555\] { color: #1f2400; }
.text-\[\#BBBBBB\], .text-\[\#bbb\], .text-\[\#bbbbbb\] { color: #1a1a1a; }
/* borders & tints readable on lime */
.border-\[\#1f1f1f\] { border-color: rgba(0, 0, 0, 0.5); }
.border-white\/\[0\.08\] { border-color: rgba(0, 0, 0, 0.22); }
.border-white\/\[0\.1\] { border-color: rgba(0, 0, 0, 0.28); }
.border-white\/\[0\.15\] { border-color: rgba(0, 0, 0, 0.35); }
.bg-white\/\[0\.04\] { background-color: rgba(0, 0, 0, 0.05); }
.hover\:bg-white\/\[0\.06\]:hover { background-color: rgba(0, 0, 0, 0.07); }
.hover\:bg-\[\#161616\]:hover { background-color: rgba(0, 0, 0, 0.09); }
.hover\:border-\[\#333333\]:hover { border-color: #000; }
.hover\:text-white:hover { color: #000; }
/* ---------- dark islands = black-and-lime terminals ----------
Inline dark bgs appear in two serializations: pre-hydration hex (background:#0d0d0d)
and post-hydration rgb (background: rgb(13, 13, 13)). Match both. */
:is([style*="#0d0d0d"], [style*="rgb(13, 13, 13)"], [style*="#111111"], [style*="rgb(17, 17, 17)"], [style*="background:#0a0a0a"], [style*="background: rgb(10, 10, 10)"], [style*="background-color: rgb(10, 10, 10)"]) {
color: #CCFF00;
}
.bg-\[\#111111\] .text-white,
:is([style*="#0d0d0d"], [style*="rgb(13, 13, 13)"], [style*="#111111"], [style*="rgb(17, 17, 17)"]) .text-white {
color: #CCFF00;
}
:is([style*="#0d0d0d"], [style*="rgb(13, 13, 13)"], [style*="#111111"], [style*="rgb(17, 17, 17)"]) .text-\[\#777777\] { color: rgba(204, 255, 0, 0.55); }
:is([style*="#0d0d0d"], [style*="rgb(13, 13, 13)"]) .text-\[\#555555\] { color: rgba(204, 255, 0, 0.45); }
:is([style*="#0d0d0d"], [style*="rgb(13, 13, 13)"]) :is(.text-\[\#BBBBBB\], .text-\[\#bbb\]) { color: rgba(204, 255, 0, 0.8); }
/* inline-white text inside dark panels -> lime terminal type */
:is([style*="#0d0d0d"], [style*="rgb(13, 13, 13)"], [style*="#111111"], [style*="rgb(17, 17, 17)"], [style*="background:#0a0a0a"], [style*="background: rgb(10, 10, 10)"]) :is([style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [style*="color:#fff"], [style*="color: rgb(255, 255, 255)"]) {
color: rgba(204, 255, 0, 0.85) !important;
}
/* terminal shells: dark border, soft shadow instead of heavy black halo */
:has(> [style*="#0d0d0d"]), :has(> [style*="rgb(13, 13, 13)"]),
:has(> [style*="background:#0a0a0a"]), :has(> [style*="background: rgb(10, 10, 10)"]) {
border-color: rgba(0, 0, 0, 0.55) !important;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25) !important;
}
/* tooltip pills (dark) lime muted text */
.bg-\[\#111111\].text-\[\#777777\] { color: rgba(204, 255, 0, 0.6); }
/* ---------- hero visuals: lime bg, black smoke ---------- */
section canvas[aria-hidden="true"] {
filter: invert(1) grayscale(1) brightness(1.9) contrast(1.3);
mix-blend-mode: multiply;
-webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 85%, transparent 100%);
mask-image: linear-gradient(to bottom, transparent 0, #000 10%, #000 85%, transparent 100%);
}
/* removed elements: MacBook mockup + CA pill (belt & braces on top of source removal) */
img[alt*="MacBook"] { display: none !important; }
.rounded-full.mb-4.cursor-pointer { display: none !important; }
/* H1 underline: was a white sweep, ink it */
h1 span[style*="linear-gradient"] {
background: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.65) 50%, transparent 100%) !important;
}
/* hero badge: squared outline with rounded corners, text only (no dot) */
.jsx-4e38998d0869f723.px-4.rounded-full {
background: rgba(0, 0, 0, 0.05) !important;
border-color: rgba(0, 0, 0, 0.55) !important;
border-radius: 10px !important;
backdrop-filter: none !important;
}
/* remove the pulsing status dot entirely */
[style*="heroPulse"] {
display: none !important;
}
/* ---------- inline GSAP/jsx white text on lime -> ink (graded) ----------
Excludes elements that ARE or are INSIDE inline-dark panels (both serializations). */
:is([style*="color:rgba(255,255,255"], [style*="color: rgba(255, 255, 255"], [style*="color:#fff"], [style*="color: rgb(255, 255, 255)"]):not([style*="#0d0d0d"]):not([style*="#111111"]):not([style*="background:#0a0a0a"]):not([style*="rgb(13, 13, 13)"]):not([style*="rgb(17, 17, 17)"]):not([style*="background: rgb(10, 10, 10)"]):not([style*="#0d0d0d"] *):not([style*="#111111"] *):not([style*="background:#0a0a0a"] *):not([style*="rgb(13, 13, 13)"] *):not([style*="rgb(17, 17, 17)"] *):not([style*="background: rgb(10, 10, 10)"] *) {
color: rgba(0, 0, 0, 0.75) !important;
}
/* quiet tier (quick links, hints) */
:is([style*="255,0.25)"], [style*="255, 0.25)"], [style*="255,0.3)"], [style*="255, 0.3)"]):not([style*="#0d0d0d"]):not([style*="#111111"]):not([style*="background:#0a0a0a"]):not([style*="rgb(13, 13, 13)"]):not([style*="rgb(17, 17, 17)"]):not([style*="background: rgb(10, 10, 10)"]):not([style*="#0d0d0d"] *):not([style*="#111111"] *):not([style*="background:#0a0a0a"] *):not([style*="rgb(13, 13, 13)"] *):not([style*="rgb(17, 17, 17)"] *):not([style*="background: rgb(10, 10, 10)"] *) {
color: rgba(0, 0, 0, 0.5) !important;
}
/* white inline borders -> dark */
:is([style*="border:1px solid rgba(255,255,255"], [style*="border: 1px solid rgba(255, 255, 255"], [style*="border-bottom:1px solid rgba(255,255,255"], [style*="border-top:1px solid rgba(255,255,255"]):not([style*="#0d0d0d"]):not([style*="#111111"]):not([style*="background:#0a0a0a"]):not([style*="rgb(13, 13, 13)"]):not([style*="rgb(17, 17, 17)"]):not([style*="background: rgb(10, 10, 10)"]):not([style*="#0d0d0d"] *):not([style*="#111111"] *):not([style*="background:#0a0a0a"] *):not([style*="rgb(13, 13, 13)"] *):not([style*="rgb(17, 17, 17)"] *):not([style*="background: rgb(10, 10, 10)"] *) {
border-color: rgba(0, 0, 0, 0.4) !important;
}
/* ghost watermark words (were white @ 6% on black) — keep after blanket rules */
[style*="color:rgba(255,255,255,0.06)"],
[style*="color: rgba(255, 255, 255, 0.06)"] {
color: rgba(0, 0, 0, 0.08) !important;
-webkit-text-stroke: 1px rgba(0, 0, 0, 0.06) !important;
}
/* scroll progress bar: black on lime */
.h-\[2px\].z-\[60\] { background: linear-gradient(90deg, rgba(0, 0, 0, 0.35), #000) !important; }
/* product mockup: lime duotone */
img[alt*="MacBook"] { filter: sepia(0.9) saturate(3.4) hue-rotate(36deg) brightness(1.02); }
/* ============================================================
"Our products" — deep-rebrand: premium bento, black cards on lime
============================================================ */
/* kill the empty grid cell left by the hidden SDK/npm card */
.fade-in-up:has(> a[href*="npmjs.com"]) { display: none !important; }
/* when the interactive showcase mounts, hide the static fallback grid entirely
(React keeps resetting inline display, so enforce it in CSS; no showcase = grid stays) */
.grid:has(> div > a.rounded-xl.p-6.h-full):has(~ #hp-showcase) { display: none !important; }
/* monospace kicker above the section heading */
section:has(a.rounded-xl.p-6.h-full) h2::before {
content: "PRODUCT SUITE";
display: block;
font-family: var(--font-mono), 'JetBrains Mono', monospace;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.24em;
color: rgba(0, 0, 0, 0.5);
margin-bottom: 14px;
}
/* desktop bento: 2 feature cards (Dashboard, Proxy) + 3 tools */
@media (min-width: 1024px) {
.grid:has(> div > a.rounded-xl.p-6.h-full) {
display: grid !important;
grid-template-columns: repeat(6, 1fr) !important;
gap: 16px !important;
align-items: stretch !important;
}
.grid:has(> div > a.rounded-xl.p-6.h-full) > div { min-width: 0 !important; }
.grid:has(> div > a.rounded-xl.p-6.h-full) > div:nth-child(2) { grid-column: span 3 !important; } /* Dashboard */
.grid:has(> div > a.rounded-xl.p-6.h-full) > div:nth-child(3) { grid-column: span 3 !important; } /* Proxy */
.grid:has(> div > a.rounded-xl.p-6.h-full) > div:nth-child(4) { grid-column: span 2 !important; } /* Budget Policies */
.grid:has(> div > a.rounded-xl.p-6.h-full) > div:nth-child(5) { grid-column: span 2 !important; } /* Audit Trails */
.grid:has(> div > a.rounded-xl.p-6.h-full) > div:nth-child(6) { grid-column: span 2 !important; } /* Explorer */
.grid:has(> div > a.rounded-xl.p-6.h-full) > div:nth-child(2) a,
.grid:has(> div > a.rounded-xl.p-6.h-full) > div:nth-child(3) a { min-height: 208px !important; }
}
.grid:has(> div > a.rounded-xl.p-6.h-full) > div { height: 100% !important; }
/* the card itself: deep-black surface, brand keyline, no AI glow */
a.rounded-xl.p-6.h-full {
background: #0B0E14 !important;
border: 1px solid rgba(0, 0, 0, 0.65) !important;
border-radius: 16px !important;
padding: 26px !important;
gap: 20px !important;
transition: transform .18s ease, border-color .18s ease !important;
will-change: transform;
}
a.rounded-xl.p-6.h-full > .absolute.inset-0 { display: none !important; } /* glow overlay off */
@media (hover: hover) {
a.rounded-xl.p-6.h-full:hover {
transform: translateY(-3px) !important;
border-color: #CCFF00 !important;
}
}
/* icon chip: lime-tinted, fills solid lime on hover
(:not(#_hb) is a specificity boost — beats the global ink/border blanket rules) */
a.rounded-xl.p-6.h-full:not(#_hb) .w-9.h-9.rounded-lg {
width: 44px !important; height: 44px !important;
background: rgba(204, 255, 0, 0.12) !important;
border: 1px solid rgba(204, 255, 0, 0.4) !important;
border-radius: 12px !important;
transition: background .18s ease, border-color .18s ease !important;
}
a.rounded-xl.p-6.h-full:not(#_hb) .w-9.h-9.rounded-lg svg {
color: #CCFF00 !important; width: 21px !important; height: 21px !important;
}
@media (hover: hover) {
a.rounded-xl.p-6.h-full:not(#_hb):hover .w-9.h-9.rounded-lg { background: #CCFF00 !important; border-color: #CCFF00 !important; }
a.rounded-xl.p-6.h-full:not(#_hb):hover .w-9.h-9.rounded-lg svg { color: #000 !important; }
}
/* title, arrow, description on the dark card */
a.rounded-xl.p-6.h-full:not(#_hb) h3 {
color: #ffffff !important;
font-size: 1.06rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
}
a.rounded-xl.p-6.h-full:not(#_hb) svg.lucide-arrow-right { color: #CCFF00 !important; }
a.rounded-xl.p-6.h-full:not(#_hb) p {
color: rgba(255, 255, 255, 0.58) !important;
font-size: 0.83rem !important;
line-height: 1.55 !important;
}
/* "Soon" tag → lime outline */
a.rounded-xl.p-6.h-full:not(#_hb) .justify-between span {
color: #CCFF00 !important;
background: rgba(204, 255, 0, 0.1) !important;
border: 1px solid rgba(204, 255, 0, 0.4) !important;
border-radius: 6px !important;
font-family: var(--font-mono), 'JetBrains Mono', monospace !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
}
/* ---------- brand mark: transparent hand logo, enlarged ---------- */
svg[aria-label="x402hood logo"] {
background: url("/newlogo.png?v=2") center / contain no-repeat;
width: 42px;
height: 42px;
}
svg[aria-label="x402hood logo"] * { display: none; }
/* GitHub and npm buttons/links removed site-wide (nav icons, hero links, footer) */
a[aria-label="GitHub"],
a[href*="github.com"],
a[aria-label="npm"],
a[href*="npmjs.com"] { display: none !important; }
/* Twitter bird -> X logo */
a[aria-label="Twitter / X"] svg.lucide-twitter { display: none !important; }
a[aria-label="Twitter / X"] {
background: url('data:image/svg+xml;utf8,') center / 15px 15px no-repeat !important;
}
/* npm buttons/links removed site-wide (nav icon, quick link, footer) */
a[href*="npmjs.com"] { display: none !important; }
/* Twitter bird -> X logo everywhere the account is linked */
a[href*="x.com/x402hood"] svg * { display: none !important; }
a[href*="x.com/x402hood"] svg {
background: url("data:image/svg+xml;utf8,") center / 72% no-repeat;
}
/* old Reown AppKit registration retired — never show its modal */
w3m-modal, wcm-modal, appkit-modal { display: none !important; }
/* hood-app pages (explorer/dashboard): the dead React shell stays hidden,
only our app root and the auth overlay render */
html[data-hood-app] body > div:not(#hood-app):not(#hood-auth) { display: none !important; }