/* ============================================================ Nero Protocol — full brand recolor Palette sampled from the Nero logo + banner: near-black base, BNB gold glow, black-glass marks. ============================================================ */ :root{ /* brand ramp */ --nero-abyss:#050608; /* darkest corners */ --nero-black:#0b0e11; /* base page black */ --nero-coal:#1e2026; /* mid charcoal (card body) */ --nero-gold-deep:#8a6a10; /* deep gold */ --nero-gold:#f0b90b; /* BNB gold (primary) */ --nero-gold-bright:#fcd535;/* highlight */ --nero-cream:#e8dcc0; /* warm pale text */ /* override the clone's monochrome tokens */ --bg-color:#0b0e11; --text-primary:#f8f6f0; --text-secondary:#b8a97e; /* was grey #86868b */ --accent-color:#ffffff; --localnav-body:#16181d; /* was #121212 grey */ --localnav-body-alpha:rgba(22,24,29,.82); --localnav-outline:#8a6a10; } /* ---- base: black + banner-like glow on (BACKMOST layer). CRITICAL: the intro city/globe/$ live in #canvas-container (position:fixed; z-index:-1). is an in-flow block, so ANY opaque body background paints OVER that canvas and hides the intro. Keep the paint on ; keep transparent. ---- */ html{ background-color:#0b0e11 !important; background-image: radial-gradient(60% 46% at 50% 78%, rgba(217,167,10,0.34), transparent 70%), radial-gradient(80% 52% at 50% 104%, rgba(240,185,11,0.31), transparent 72%), radial-gradient(46% 34% at 86% 4%, rgba(160,123,17,0.17), transparent 70%), linear-gradient(180deg, #050608 0%, #0b0e11 45%, #16181d 80%, #24262c 100%) !important; background-attachment:fixed !important; background-repeat:no-repeat !important; } body{background-color:transparent !important;} /* ---- THE key unlock: the clone paints an opaque near-black grain plate (#canvas-container::before, background-color:#050505, full-viewport, z:-1) on top of the root background. While it is opaque the page reads as pure black no matter what black we set. Make it transparent so the brand gradient shows through — the SVG grain texture is preserved. ---- */ #canvas-container::before{ background-color:transparent !important; /* the plate also carries an OPAQUE BLACK radial (#0e0e0e -30% → #000 60%) that fades in (opacity 0→1) once the intro ends — that is what made every section past the hero go black. Repaint it in brand black, keep the grain. */ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(circle at 50% 0%, #1a1c21 -30%, #0b0e11 45%, #0b0e11 100%) !important; background-repeat:repeat, no-repeat !important; } /* ---- the site's own ambient glow layer was GREY/BLACK — make it the banner's gold bloom (it fades in on scroll, z:-3) ---- */ #header-glow{ background:radial-gradient(ellipse 90% 100% at 50% 0%, rgba(130,100,14,.85) 0%, rgba(240,185,11,.42) 55%, rgba(252,213,53,.16) 72%, transparent 100%) !important; } /* ---- city skyline: greyscale PNG → gold tint ---- */ .skyline-image{ filter:sepia(1) saturate(4.5) hue-rotate(-8deg) brightness(.95) !important; } /* ---- primary CTA → BNB gold, white text ---- */ .cta-button, .hero-cta-button{ background:linear-gradient(135deg,#f0b90b,#d9a70a) !important; color:#fff !important; border:none !important; box-shadow:0 6px 24px rgba(240,185,11,.55), inset 0 1px 0 rgba(255,255,255,.30) !important; } .cta-button:hover, .hero-cta-button:hover{ background:linear-gradient(135deg,#fcd535,#f0b90b) !important; box-shadow:0 12px 34px rgba(240,185,11,.72), inset 0 1px 0 rgba(255,255,255,.34) !important; } #cta-button-text{color:#fff !important;} /* ---- nav pill: dark glass, gold rim ---- */ .localnav-wrap{ background:rgba(22,24,29,.82) !important; border:1px solid rgba(252,213,53,.26) !important; box-shadow:0 10px 38px rgba(11,14,17,.65), inset 0 0 0 1px rgba(252,213,53,.08) !important; backdrop-filter:blur(18px) saturate(1.3) !important; } /* ---- every glass surface: grey/white-alpha → gold-tinted charcoal ---- */ .glass-card, .step-card, .security-card, .strategy-alert, .glass-badge, .font-btn{ background:linear-gradient(135deg, rgba(240,185,11,.11), rgba(138,106,16,.06)) !important; border:1px solid rgba(252,213,53,.20) !important; box-shadow:0 12px 40px rgba(11,14,17,.45), inset 0 1px 0 rgba(255,216,107,.10) !important; } .glass-card:hover, .step-card:hover, .security-card:hover, .font-btn:hover{ border-color:rgba(252,213,53,.38) !important; box-shadow:0 16px 48px rgba(240,185,11,.28), inset 0 1px 0 rgba(255,220,140,.16) !important; } /* active states pick up the electric accent */ .step-card.active, .strategy-alert.active{ background:linear-gradient(135deg, rgba(240,185,11,.22), rgba(138,106,16,.12)) !important; border-color:rgba(252,213,53,.55) !important; box-shadow:0 0 0 1px rgba(252,213,53,.25), 0 14px 44px rgba(240,185,11,.35) !important; } .glass-card:before{background:linear-gradient(135deg, rgba(252,213,53,.14), rgba(240,185,11,.04)) !important;} /* ---- step numbers / icon chips ---- */ .step-number{ border-color:rgba(252,213,53,.45) !important; color:#f0e8d4 !important; box-shadow:0 0 18px rgba(240,185,11,.30) !important; } /* ---- secondary text: grey → warm sand ---- */ .text-secondary, .metric-label, .label-name, .feature-subtext, .step-text p, p.lead, .security-card-text{color:#b8a97e !important;} /* ---- dividers / hairlines ---- */ .metric-divider, .security-card-divider, hr{background-color:rgba(252,213,53,.28) !important;border-color:rgba(252,213,53,.28) !important;} /* ---- links ---- */ a{color:inherit;} a:hover{color:var(--nero-gold-bright) !important;} /* ---- partner logos: keep legible but warm-tinted ---- */ .partner-logo-img,.logo-item img{filter:brightness(1.05) saturate(.6) hue-rotate(358deg) !important;} /* ============================================================ Order-lifecycle section — banner-grade treatment glossy dark glass + gold rim light + trading typography ============================================================ */ /* eyebrow above the step list */ .steps-container{position:relative;padding-top:34px !important;} .steps-container::before{ content:"ORDER LIFECYCLE"; position:absolute; top:0; left:2px; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.22em; font-weight:600; color:rgba(252,213,53,.75); } /* ---- card: layered glass, not a flat box ---- */ .step-card{ position:relative; overflow:hidden; padding:22px 24px 22px 26px !important; border-radius:20px !important; background: linear-gradient(180deg, rgba(255,216,107,.07), rgba(255,216,107,0) 42%), linear-gradient(135deg, rgba(60,46,10,.85), rgba(22,24,29,.92)) !important; border:1px solid rgba(252,213,53,.16) !important; box-shadow:0 18px 48px rgba(5,6,8,.55), inset 0 1px 0 rgba(255,220,140,.10) !important; transition:transform .35s cubic-bezier(.2,.7,.3,1), border-color .35s ease, box-shadow .35s ease, background .35s ease !important; } /* left accent rail */ .step-card::before{ content:""; position:absolute; left:0; top:16px; bottom:16px; width:2px; border-radius:2px; background:linear-gradient(180deg,#fcd535,#d9a70a); opacity:.18; transition:opacity .35s ease, top .35s ease, bottom .35s ease; } /* glossy sheen sweeping the top edge */ .step-card::after{ content:""; position:absolute; inset:-40% -20% auto -20%; height:70%; background:radial-gradient(60% 100% at 50% 0%, rgba(252,213,53,.16), transparent 70%); pointer-events:none; opacity:.7; } .step-card:hover{ transform:translateY(-2px); border-color:rgba(252,213,53,.34) !important; box-shadow:0 24px 60px rgba(11,14,17,.6), inset 0 1px 0 rgba(255,225,150,.16) !important; } .step-card:hover::before{opacity:.5;} /* ---- active: electric rim like the banner ---- */ .step-card.active{ background: linear-gradient(180deg, rgba(255,216,107,.12), rgba(255,216,107,0) 45%), linear-gradient(135deg, rgba(140,108,16,.92), rgba(26,28,33,.95)) !important; border-color:rgba(252,213,53,.55) !important; box-shadow: 0 0 0 1px rgba(252,213,53,.18), 0 26px 70px rgba(217,167,10,.34), inset 0 1px 0 rgba(255,225,150,.22) !important; } .step-card.active::before{opacity:1; top:12px; bottom:12px;} /* ---- number chip: squared like the logo tiles, monospace ---- */ .step-number{ width:38px !important; height:38px !important; border-radius:11px !important; font-family:ui-monospace,SFMono-Regular,Menlo,monospace !important; font-size:14px !important; font-weight:600 !important; letter-spacing:0 !important; display:flex !important; align-items:center; justify-content:center; color:#e8dcc0 !important; background:linear-gradient(150deg, rgba(240,185,11,.20), rgba(138,106,16,.30)) !important; border:1px solid rgba(252,213,53,.28) !important; box-shadow:inset 0 1px 0 rgba(255,225,150,.20) !important; transition:all .35s ease; } .step-card.active .step-number{ color:#fff !important; background:linear-gradient(150deg,#fcd535,#d9a70a) !important; border-color:rgba(255,220,140,.55) !important; box-shadow:0 6px 20px rgba(240,185,11,.55), inset 0 1px 0 rgba(255,255,255,.30) !important; } /* ---- typography: tighter, higher contrast ---- */ .step-text h3{ font-size:19px !important; font-weight:600 !important; letter-spacing:-.01em !important; line-height:1.25 !important; color:#f8f6f0 !important; margin-bottom:6px !important; } .step-text p{ font-size:14.5px !important; line-height:1.55 !important; color:#b8a97e !important; margin-bottom:0 !important; } .step-card.active .step-text p{color:#e8dcc0 !important;} .step-content{gap:18px !important; align-items:flex-start !important;} /* ---- section headline: glossy gradient like the banner ---- */ #feature-section-2 .feature-headline-sm, #feature-section-2 .feature-headline{ background:linear-gradient(180deg,#ffffff 30%,#e8dcc0 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; } /* ---- header lockup: was visually small (SVG had 29% empty vertical padding) and dimmed to .9 — tightened the viewBox and scaled up ---- */ .logo{height:27px !important; opacity:1 !important; margin-right:9px !important;} .footer-logo{height:26px !important; opacity:1 !important;} @media (max-width:768px){ .logo{height:23px !important;} } /* ---- header socials: X icon + GitHub mark inside the CTA ---- */ .nav-social{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; margin-right:8px; border-radius:10px; color:#e8dcc0; text-decoration:none; border:1px solid rgba(252,213,53,.18); background:linear-gradient(150deg, rgba(240,185,11,.10), rgba(138,106,16,.14)); transition:color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; } .nav-social:hover{ color:#fff !important; transform:translateY(-1px); border-color:rgba(252,213,53,.45); background:linear-gradient(150deg, rgba(252,213,53,.22), rgba(150,115,18,.24)); } .cta-button{display:inline-flex !important; align-items:center; gap:7px;} .cta-icon{flex:0 0 auto; opacity:.95;} @media (max-width:768px){ .nav-social{width:28px;height:28px;margin-right:6px;border-radius:9px;} .nav-social svg{width:13px;height:13px;} } /* ---- capability chips replacing third-party logo strips ---- */ .partner-chip{ display:inline-flex; align-items:center; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; letter-spacing:.18em; font-weight:600; color:#cbbf9a; padding:7px 14px; border-radius:999px; border:1px solid rgba(252,213,53,.20); background:linear-gradient(150deg, rgba(240,185,11,.10), rgba(138,106,16,.12)); } .logo-item .partner-chip{font-size:10.5px;letter-spacing:.16em} .partner-logo{display:flex;align-items:center} @media (max-width:768px){ .partner-chip{font-size:10px;letter-spacing:.14em;padding:6px 11px} } /* ============================================================ Responsive polish ============================================================ */ /* the hero metrics sit on top of the 3D ring — keep them readable */ .metrics-section .metric-label, .metrics-section .metric-value{ text-shadow:0 2px 16px rgba(11,14,17,.8), 0 0 3px rgba(11,14,17,.6); } @media (max-width:768px){ /* metric row was crowding the ring: tighter label, more air between items */ .metric-label{ font-size:10px !important; letter-spacing:.06em !important; } .metric-value{ font-size:22px !important; } .metric-item{ padding-left:.65rem !important; padding-right:.65rem !important; } .metric-divider{ height:34px !important; margin:0 .35rem !important; } /* step cards: less padding, tighter type so 3 fit comfortably */ .step-card{ padding:18px 18px 18px 20px !important; border-radius:16px !important; } .step-content{ gap:14px !important; } .step-number{ width:34px !important; height:34px !important; border-radius:10px !important; font-size:13px !important; } .step-text h3{ font-size:17px !important; } .step-text p{ font-size:14px !important; line-height:1.5 !important; } .steps-container{ padding-top:30px !important; } .steps-container::before{ font-size:10px; letter-spacing:.18em; } /* security cards */ .security-card{ padding:18px !important; border-radius:16px !important; } } /* very narrow phones (iPhone SE and friends) */ @media (max-width:400px){ .metric-label{ font-size:9.5px !important; letter-spacing:.04em !important; } .metric-value{ font-size:20px !important; } .feature-headline{ font-size:34px !important; line-height:1.12 !important; } .feature-headline-sm{ font-size:31px !important; line-height:1.14 !important; } .step-card{ padding:16px !important; } .step-text h3{ font-size:16px !important; } } /* landscape phones: the pinned hero must not clip its own content */ @media (max-height:520px) and (orientation:landscape){ .metrics-section{ margin-top:.5rem !important; } .metric-value{ font-size:19px !important; } } /* ============================================================ LIGHT LIME THEME (overrides everything above — last wins) Bg: chartreuse #f0b90b -> olive #b88a08 at the edges, white blooms. Text/logo stay WHITE, so every text zone sits on an INK plate (#08090c @ alpha). Measured contrast (white vs composite over lime): nav .72 -> 8.38:1 | hero .62 -> 6.24:1 | cards .60 -> 5.90:1 chips .58 -> 5.51:1 (body needs 4.5, large headings 3.0) ============================================================ */ :root{ --lime:#f0b90b; --lime-hi:#fcd535; --olive:#b88a08; --ink:#08090c; --bg-color:#f0b90b; --text-primary:#ffffff; --text-secondary:#f8f6f0; --localnav-body:rgba(8,9,12,.72); --localnav-body-alpha:rgba(8,9,12,.72); --localnav-outline:rgba(255,255,255,.30); } /* ---- 1. base: lime field, olive vignette, white blooms. No dark zones. ---- */ html{ background-color:#f0b90b !important; background-image: radial-gradient(46% 34% at 14% 10%, rgba(255,255,255,.62), transparent 62%), radial-gradient(40% 30% at 86% 78%, rgba(255,255,255,.48), transparent 64%), radial-gradient(70% 50% at 62% 32%, rgba(255,255,255,.28), transparent 70%), radial-gradient(125% 105% at 50% 46%, transparent 42%, rgba(184,138,8,.55) 78%, rgba(184,138,8,.92) 100%), linear-gradient(158deg, #fcd535 0%, #f0b90b 42%, #d9a70a 74%, #b88a08 100%) !important; background-attachment:fixed !important; background-repeat:no-repeat !important; } body{background-color:transparent !important;} /* ---- 2. grain plate: was a dark radial that fades in after the intro and would black out everything below the hero. Repaint it LIME, keep grain. ---- */ #canvas-container::before{ background-color:transparent !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E"), radial-gradient(circle at 50% 0%, rgba(255,255,255,.42) -30%, rgba(240,185,11,.10) 45%, rgba(217,167,10,.30) 100%) !important; background-repeat:repeat, no-repeat !important; } #header-glow{ background:radial-gradient(ellipse 92% 100% at 50% 0%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.34) 48%, rgba(252,213,53,.18) 70%, transparent 100%) !important; } /* ---- 3. INK PLATES under every text zone (this is what makes white legible) ---- */ .hero-section,.content-section,#globe-section{position:relative;} .hero-section::before,.content-section::before{ content:"";position:absolute;inset:-6% -4%;pointer-events:none;z-index:0; background:radial-gradient(ellipse 58% 44% at 50% 46%, rgba(8,9,12,.62) 0%, rgba(8,9,12,.46) 46%, rgba(8,9,12,.16) 66%, transparent 76%); } .hero-section > *,.content-section > *{position:relative;z-index:1;} /* text: white + a soft ink halo so thin glyphs survive over gradient edges */ .feature-headline,.feature-headline-sm,.metric-value,.metric-label, .step-text h3,.step-text p,.security-card-text,.slider-label,h1,h2,h3,p,li{ color:#ffffff !important; text-shadow:0 1px 10px rgba(8,9,12,.62), 0 0 26px rgba(8,9,12,.38) !important; } .text-secondary,.metric-label,.label-name{color:#f8f6f0 !important;} /* ---- 4. surfaces: glass was light-on-dark, now INK-on-lime ---- */ .glass-card,.step-card,.security-card,.strategy-alert,.glass-badge,.font-btn{ background:linear-gradient(135deg, rgba(8,9,12,.60), rgba(8,9,12,.52)) !important; border:1px solid rgba(255,255,255,.26) !important; box-shadow:0 16px 44px rgba(66,52,8,.30), inset 0 1px 0 rgba(255,255,255,.14) !important; backdrop-filter:blur(6px) saturate(1.1) !important; } .glass-card:hover,.step-card:hover,.security-card:hover,.font-btn:hover{ border-color:rgba(255,255,255,.46) !important; box-shadow:0 20px 52px rgba(66,52,8,.38), inset 0 1px 0 rgba(255,255,255,.20) !important; } .step-card.active,.strategy-alert.active{ background:linear-gradient(135deg, rgba(8,9,12,.72), rgba(8,9,12,.62)) !important; border-color:rgba(255,255,255,.62) !important; box-shadow:0 0 0 1px rgba(255,255,255,.30), 0 18px 50px rgba(44,34,4,.42) !important; } .glass-card:before{background:linear-gradient(135deg, rgba(255,255,255,.14), transparent) !important;} .step-number{ border-color:rgba(255,255,255,.55) !important;color:#ffffff !important; background:rgba(8,9,12,.55) !important;box-shadow:0 0 18px rgba(8,9,12,.35) !important; } .step-card.active .step-number{background:rgba(8,9,12,.78) !important;border-color:#fff !important;} /* nav pill: densest plate (8.38:1) */ .localnav-wrap{ background:rgba(8,9,12,.72) !important; border:1px solid rgba(255,255,255,.30) !important; box-shadow:0 12px 40px rgba(66,52,8,.34), inset 0 0 0 1px rgba(255,255,255,.10) !important; backdrop-filter:blur(18px) saturate(1.2) !important; } .partner-chip,.logo-item .partner-chip{ background:rgba(8,9,12,.58) !important; border:1px solid rgba(255,255,255,.26) !important; color:#ffffff !important;text-shadow:none !important; } /* CTA: ink button, white label — reads on lime, unlike the old green fill */ .cta-button,.hero-cta-button{ background:linear-gradient(135deg, rgba(8,9,12,.94), rgba(31,24,8,.94)) !important; color:#fff !important;border:1px solid rgba(255,255,255,.34) !important; box-shadow:0 10px 30px rgba(56,44,6,.40), inset 0 1px 0 rgba(255,255,255,.20) !important; } .cta-button:hover,.hero-cta-button:hover{ background:linear-gradient(135deg,#08090c,#1e2026) !important; box-shadow:0 14px 40px rgba(56,44,6,.52), inset 0 1px 0 rgba(255,255,255,.26) !important; } #cta-button-text{color:#fff !important;} .nav-social{background:rgba(8,9,12,.58) !important;border:1px solid rgba(255,255,255,.28) !important;color:#fff !important;} .nav-social:hover{background:rgba(8,9,12,.80) !important;} /* logo + marks stay white, with a halo so they hold on the bright field */ .logo,.footer-logo{filter:drop-shadow(0 2px 10px rgba(8,9,12,.55)) !important;opacity:1 !important;} /* city skyline: dark silhouette against the lime sky */ .skyline-image{filter:brightness(.30) saturate(1.4) sepia(.8) hue-rotate(-6deg) !important;opacity:.55 !important;} hr{border-color:rgba(8,9,12,.28) !important;} a{color:#ffffff !important;} a:hover{color:#08090c !important;} /* ---- 5. FIX: the hero H1 uses .metallic-text-gradient — a silver gradient painted through -webkit-background-clip:text with a TRANSPARENT fill, so plain `color` never reaches it. On the dark theme it read white; on lime it read grey. Repaint the gradient itself in white. ---- */ .metallic-text-gradient, .metallic-text-gradient *{ background-image:linear-gradient(120deg,#ffffff 28%,#fbf9f4 52%,#ffffff 76%) !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important; filter:drop-shadow(0 2px 12px rgba(8,9,12,.55)) !important; } /* ---- 6. soften the ink plate: wider, gentler falloff so it reads as light pooling, not a dirty blob on the lime field ---- */ .hero-section::before,.content-section::before{ inset:-14% -12% !important; background:radial-gradient(ellipse 74% 58% at 50% 47%, rgba(8,9,12,.60) 0%, rgba(8,9,12,.52) 30%, rgba(8,9,12,.34) 52%, rgba(8,9,12,.14) 70%, transparent 84%) !important; filter:blur(14px) !important; } /* ============================================================ v11 — KILL THE DARK VEIL. The radial ink plates made the lime look muddy/olive. Remove them entirely and flip the type to INK instead: dark text on lime is 12.75:1 (vs white-on-lime 1.41:1), and it matches the reference look — black graphics sitting straight on the lime field. ============================================================ */ /* 1. no more veils */ .hero-section::before,.content-section::before{content:none !important;display:none !important;} /* 2. clean lime field: lighter, airier, vignette barely there */ html{ background-color:#fcd535 !important; background-image: radial-gradient(52% 40% at 16% 8%, rgba(255,255,255,.78), transparent 66%), radial-gradient(46% 34% at 84% 76%, rgba(255,255,255,.60), transparent 66%), radial-gradient(80% 60% at 55% 40%, rgba(255,255,255,.30), transparent 72%), radial-gradient(130% 110% at 50% 46%, transparent 62%, rgba(200,152,12,.34) 100%), linear-gradient(158deg,#fcd535 0%,#fcd535 46%,#f0b90b 78%,#d9a70a 100%) !important; } #canvas-container::before{ background-color:transparent !important; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E"), radial-gradient(circle at 50% 0%, rgba(255,255,255,.35) -20%, rgba(255,255,255,0) 60%) !important; } #header-glow{background:radial-gradient(ellipse 92% 100% at 50% 0%, rgba(255,255,255,.80) 0%, rgba(255,255,255,.34) 46%, transparent 100%) !important;} /* 3. type goes INK (12.75:1 on lime) — no shadows, no halos, no veil */ .feature-headline,.feature-headline-sm,.metric-value,.metric-label, .feature-description,.step-text h3,.step-text p,.security-card-text, .slider-label,h1,h2,h3,p,li,.text-secondary,.label-name{ color:#0b0e11 !important; text-shadow:none !important; } .metallic-text-gradient,.metallic-text-gradient *{ background-image:linear-gradient(120deg,#0b0e11 30%,#1e2026 55%,#0b0e11 80%) !important; -webkit-background-clip:text !important;background-clip:text !important; -webkit-text-fill-color:transparent !important; filter:none !important; } .metric-label,.text-secondary{color:#24262c !important;} /* 4. surfaces: light cards on lime (they were dark plates) */ .glass-card,.step-card,.security-card,.strategy-alert,.glass-badge,.font-btn{ background:linear-gradient(160deg, rgba(255,255,255,.86), rgba(255,255,255,.68)) !important; border:1px solid rgba(11,14,17,.14) !important; box-shadow:0 14px 38px rgba(100,78,10,.16), inset 0 1px 0 rgba(255,255,255,.90) !important; backdrop-filter:blur(4px) !important; } .glass-card:hover,.step-card:hover,.security-card:hover,.font-btn:hover{ border-color:rgba(11,14,17,.26) !important; box-shadow:0 18px 46px rgba(100,78,10,.22), inset 0 1px 0 #fff !important; } .step-card.active,.strategy-alert.active{ background:linear-gradient(160deg,#ffffff,rgba(255,255,255,.86)) !important; border-color:rgba(11,14,17,.30) !important; box-shadow:0 0 0 1px rgba(11,14,17,.10), 0 20px 52px rgba(100,78,10,.24) !important; } .glass-card:before{background:none !important;} .step-number{ background:#0b0e11 !important;border-color:#0b0e11 !important; color:#fcd535 !important;box-shadow:none !important; } .step-card.active .step-number{background:#0b0e11 !important;color:#fcd535 !important;} .partner-chip,.logo-item .partner-chip{ background:rgba(255,255,255,.72) !important; border:1px solid rgba(11,14,17,.16) !important; color:#0b0e11 !important; } hr{border-color:rgba(11,14,17,.16) !important;} a{color:#0b0e11 !important;} a:hover{color:#34383f !important;} /* v12 — the hero "$" is NOT 3D: it is a plain
whose colour was rgba(255,255,255,.7). White-on-lime made it a washed-out blob. Make it a dark watermark instead. */ #dollar-sign{ color:rgba(11,14,17,.15) !important; text-shadow:none !important; } /* chips: were reading grey-olive — force clean white glass + ink label */ .partner-chip,.logo-item .partner-chip{ background:rgba(255,255,255,.82) !important; border:1px solid rgba(11,14,17,.18) !important; color:#0b0e11 !important; backdrop-filter:blur(3px) !important; } /* v13 — chips rendered grey despite a white computed background: the backdrop-filter blur was compositing the lime behind them into mud. Drop the blur, use a solid white pill. */ .partner-chip,.logo-item .partner-chip{ background:#ffffff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; border:1px solid rgba(11,14,17,.16) !important; color:#0b0e11 !important; box-shadow:0 2px 10px rgba(100,78,10,.12) !important; } .glass-card,.step-card,.security-card,.strategy-alert,.glass-badge,.font-btn{ backdrop-filter:none !important;-webkit-backdrop-filter:none !important; } /* ============================================================ v14 — PROPER LIGHT THEME (supersedes every patch above). Rules learned from the dark-theme leftovers: - cards were translucent -> lime bled through -> everything merged - nav kept its dark pill but my global a{color:ink} made its links dark-on-dark - icons / stat numbers were still white - the particle web read as dirt on a bright field Reference language: solid white surfaces + black type on flat lime. ============================================================ */ /* --- surfaces: SOLID white, real edges, real shadow --- */ .glass-card,.step-card,.security-card,.strategy-alert,.glass-badge,.font-btn, .transparency-badge,.slider-track,.partners-slider-side{ background:#ffffff !important; background-image:none !important; border:1px solid rgba(11,14,17,.12) !important; box-shadow:0 10px 30px rgba(90,70,10,.13) !important; backdrop-filter:none !important;-webkit-backdrop-filter:none !important; } .glass-card:hover,.step-card:hover,.security-card:hover,.font-btn:hover{ border-color:rgba(11,14,17,.24) !important; box-shadow:0 16px 40px rgba(90,70,10,.20) !important; } /* active step: ink rail + slight lift, not a colour change */ .step-card.active,.strategy-alert.active{ background:#ffffff !important; border-color:rgba(11,14,17,.30) !important; box-shadow:-4px 0 0 0 #0b0e11, 0 16px 40px rgba(90,70,10,.22) !important; } .step-card::before,.step-card::after,.glass-card:before{background:none !important;box-shadow:none !important;} .step-card,.glass-card,.security-card{opacity:1 !important;} /* --- ALL type ink, including the gradient-clipped headings --- */ h1,h2,h3,h4,p,li,span,div.metric-value,.feature-headline,.feature-headline-sm, .metric-label,.feature-description,.step-text h3,.step-text p,.security-card-text, .slider-label,.transparency-badge-value,.transparency-badge-label,.label-name{ -webkit-text-fill-color:currentColor !important; } .feature-headline,.feature-headline-sm,.metallic-text-gradient, .metallic-text-gradient *,h1,h2,h3{ background-image:none !important;background:none !important; color:#0b0e11 !important;-webkit-text-fill-color:#0b0e11 !important; filter:none !important;text-shadow:none !important; } p,li,.feature-description,.step-text p,.security-card-text{color:#1e2026 !important;} .metric-label,.text-secondary,.transparency-badge-label,.slider-label{color:#2b2f36 !important;} .transparency-badge-value,.metric-value{color:#0b0e11 !important;} /* --- icons were white SVGs: make them ink --- */ .security-icon-wrapper svg,.security-icon-wrapper img, .step-card svg:not(.cta-icon),.glass-card svg{ filter:brightness(0) saturate(100%) !important;opacity:.85 !important; } .security-icon-wrapper{background:none !important;} /* --- nav: white pill, ink links (it was dark pill + ink links = unreadable) --- */ .localnav-wrap{ background:#ffffff !important; border:1px solid rgba(11,14,17,.12) !important; box-shadow:0 10px 30px rgba(90,70,10,.16) !important; } .localnav-wrap a,.localnav-wrap a:visited,#localnav a{color:#1e2026 !important;} .localnav-wrap a:hover{color:#0b0e11 !important;} .logo,.footer-logo{filter:brightness(0) saturate(100%) !important;opacity:1 !important;} /* CTA + X stay ink-filled with white glyphs */ .cta-button,.hero-cta-button{ background:#0b0e11 !important;border:none !important; box-shadow:0 8px 22px rgba(33,26,6,.28) !important; } .cta-button *,#cta-button-text{color:#ffffff !important;-webkit-text-fill-color:#fff !important;} .cta-icon,.cta-button svg{filter:none !important;color:#fff !important;fill:#fff !important;opacity:1 !important;} .nav-social{background:#0b0e11 !important;border:none !important;} .nav-social svg{filter:none !important;fill:#fff !important;color:#fff !important;opacity:1 !important;} /* --- chips inside the white slider need contrast against white, not lime --- */ .partner-chip,.logo-item .partner-chip{ background:#f8f6f0 !important;border:1px solid rgba(11,14,17,.14) !important; color:#0b0e11 !important;box-shadow:none !important; } .step-number{background:#0b0e11 !important;border:none !important;color:#ffd86b !important;} /* ============================================================ v15 — FINAL CLEAN PASS. Every remaining source of mud: ============================================================ */ /* 1. the dark particle web IS the dirt on a bright field — kill it */ #nero-particles{display:none !important;} /* 2. slider side-fades were painted SOLID white in v14 (they are fade masks!) — that is what hard-clipped the chips. Hide them; the marquee can run edge to edge inside its white card. */ .partners-slider-side{display:none !important;background:none !important;box-shadow:none !important;border:none !important;} /* 3. chips: pure white pills, ink label */ .partner-chip,.logo-item .partner-chip{ background:#ffffff !important;border:1px solid rgba(11,14,17,.16) !important; color:#0b0e11 !important; } /* 4. skyline: dark-olive silhouette read as a stain — make it a soft white silhouette, like haze behind the hero */ .skyline-image{filter:brightness(0) invert(1) !important;opacity:.4 !important;} /* 5. the "ORDER LIFECYCLE" eyebrow was still teal from the old accent */ .steps-container::before{color:#3d424a !important;text-shadow:none !important;} [class*="eyebrow"]{color:#3d424a !important;} /* 6. footer + misc leftovers */ footer,footer p,footer a,footer span,.footer-links a{color:#1e2026 !important;} footer{background:transparent !important;border-top:1px solid rgba(11,14,17,.14) !important;} .metric-divider{background:rgba(11,14,17,.18) !important;} /* 7. glass-badge went white surface but kept WHITE text -> invisible */ .glass-badge,.glass-badge *{color:#0b0e11 !important;-webkit-text-fill-color:#0b0e11 !important;} .glass-badge svg{filter:brightness(0) saturate(100%) !important;opacity:.8 !important;} /* ============================================================ v16 fixes (user pass #2) ============================================================ */ /* A. partners-slider-side is a CONTENT wrapper (label + chip slider), not a fade mask — hiding it emptied the whole Proof card. Restore. */ .partners-slider-side{display:block !important;background:transparent !important;} /* B. yield-bar labels: white mark sat in a dark ROUND slot (clipped), value "24 bps*" was white-on-lime. Clean black mark, ink text. */ .label-logo{background:transparent !important;border-radius:0 !important; filter:brightness(0) !important;box-shadow:none !important;} .bar-label,.label-name,.label-value{color:#0b0e11 !important;text-shadow:none !important;} /* C. step cards glued together + harsh black outline on active */ .step-card{margin-bottom:20px !important;} .step-card.active,.strategy-alert.active{ box-shadow:0 18px 44px rgba(90,70,10,.22) !important; border-color:rgba(11,14,17,.26) !important; } .step-card.active .step-text p,.step-card.active .step-text h3{color:#1e2026 !important;} .step-card.active .step-text h3{color:#0b0e11 !important;} /* D. hero chips -> ink pills with lime label (reference badge style, reads unambiguously on any backdrop) */ .partner-chip,.logo-item .partner-chip{ background:#0b0e11 !important;border:none !important; color:#ffd86b !important;box-shadow:0 4px 14px rgba(33,26,5,.25) !important; } /* inside the white Proof card keep them ink too — consistent system */ /* E. footer over the globe: keep ink text (globe goes white below) */ footer a:hover{color:#0b0e11 !important;} /* F. constellation back (user liked it) — light olive, low alpha */ #nero-particles{display:block !important;} /* G. nav items: only "Docs" is an (my rule caught it); Engine/Orderbook/ Proof/Security are