/* ============================================================ Noir Protocol — full brand recolor Palette sampled from the Noir logo + banner: deep royal navy base, electric-blue glow, pure-white marks. ============================================================ */ :root{ /* brand ramp */ --noir-abyss:#01050f; /* darkest corners */ --noir-navy:#030b26; /* base page navy */ --noir-navy-2:#061340; /* mid navy (banner body) */ --noir-royal:#0b2f8f; /* royal blue */ --noir-blue:#1668ff; /* electric blue (primary) */ --noir-blue-bright:#4d94ff;/* highlight */ --noir-ice:#a9c7ff; /* pale blue text */ /* override the clone's monochrome tokens */ --bg-color:#030b26; --text-primary:#f2f6ff; --text-secondary:#93a9d8; /* was grey #86868b */ --accent-color:#ffffff; --localnav-body:#061034; /* was #121212 grey */ --localnav-body-alpha:rgba(6,16,52,.82); --localnav-outline:#1b3d8f; } /* ---- base: navy + 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:#071845 !important; background-image: radial-gradient(60% 46% at 50% 78%, rgba(38,126,255,.55), transparent 70%), radial-gradient(80% 52% at 50% 104%, rgba(70,160,255,.50), transparent 72%), radial-gradient(46% 34% at 86% 4%, rgba(24,90,225,.28), transparent 70%), linear-gradient(180deg, #030c28 0%, #071845 45%, #0b2a75 80%, #103aa0 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 navy 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 (#1f1f1f -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 navy, 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%, #10307e -30%, #061640 45%, #071845 100%) !important; background-repeat:repeat, no-repeat !important; } /* ---- the site's own ambient glow layer was GREY/BLACK — make it the banner's electric-blue bloom (it fades in on scroll, z:-3) ---- */ #header-glow{ background:radial-gradient(ellipse 90% 100% at 50% 0%, rgba(10,40,130,.85) 0%, rgba(24,96,240,.42) 55%, rgba(77,148,255,.16) 72%, transparent 100%) !important; } /* ---- city skyline: greyscale PNG → blue tint ---- */ .skyline-image{ filter:sepia(1) saturate(5) hue-rotate(184deg) brightness(.85) !important; } /* ---- primary CTA → electric blue, white text ---- */ .cta-button, .hero-cta-button{ background:linear-gradient(135deg,#2f7bff,#0b3fd9) !important; color:#fff !important; border:none !important; box-shadow:0 6px 24px rgba(22,104,255,.55), inset 0 1px 0 rgba(255,255,255,.30) !important; } .cta-button:hover, .hero-cta-button:hover{ background:linear-gradient(135deg,#4d94ff,#1655f0) !important; box-shadow:0 12px 34px rgba(22,104,255,.72), inset 0 1px 0 rgba(255,255,255,.34) !important; } #cta-button-text{color:#fff !important;} /* ---- nav pill: navy glass, blue rim ---- */ .localnav-wrap{ background:rgba(6,16,52,.82) !important; border:1px solid rgba(77,148,255,.26) !important; box-shadow:0 10px 38px rgba(2,8,28,.65), inset 0 0 0 1px rgba(77,148,255,.08) !important; backdrop-filter:blur(18px) saturate(1.3) !important; } /* ---- every glass surface: grey/white-alpha → blue-tinted navy ---- */ .glass-card, .step-card, .security-card, .strategy-alert, .glass-badge, .font-btn{ background:linear-gradient(135deg, rgba(22,104,255,.11), rgba(11,47,143,.06)) !important; border:1px solid rgba(77,148,255,.20) !important; box-shadow:0 12px 40px rgba(2,10,40,.45), inset 0 1px 0 rgba(140,180,255,.10) !important; } .glass-card:hover, .step-card:hover, .security-card:hover, .font-btn:hover{ border-color:rgba(77,148,255,.38) !important; box-shadow:0 16px 48px rgba(22,104,255,.28), inset 0 1px 0 rgba(160,195,255,.16) !important; } /* active states pick up the electric accent */ .step-card.active, .strategy-alert.active{ background:linear-gradient(135deg, rgba(22,104,255,.22), rgba(11,47,143,.12)) !important; border-color:rgba(77,148,255,.55) !important; box-shadow:0 0 0 1px rgba(77,148,255,.25), 0 14px 44px rgba(22,104,255,.35) !important; } .glass-card:before{background:linear-gradient(135deg, rgba(77,148,255,.14), rgba(22,104,255,.04)) !important;} /* ---- step numbers / icon chips ---- */ .step-number{ border-color:rgba(77,148,255,.45) !important; color:#cddfff !important; box-shadow:0 0 18px rgba(22,104,255,.30) !important; } /* ---- secondary text: grey → cool blue-grey ---- */ .text-secondary, .metric-label, .label-name, .feature-subtext, .step-text p, p.lead, .security-card-text{color:#93a9d8 !important;} /* ---- dividers / hairlines ---- */ .metric-divider, .security-card-divider, hr{background-color:rgba(77,148,255,.28) !important;border-color:rgba(77,148,255,.28) !important;} /* ---- links ---- */ a{color:inherit;} a:hover{color:var(--noir-blue-bright) !important;} /* ---- partner logos: keep legible but cool-tinted ---- */ .partner-logo-img,.logo-item img{filter:brightness(1.05) saturate(.6) hue-rotate(190deg) !important;} /* ============================================================ Order-lifecycle section — banner-grade treatment glossy dark glass + electric 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(120,165,255,.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(140,180,255,.07), rgba(140,180,255,0) 42%), linear-gradient(135deg, rgba(12,32,86,.85), rgba(5,14,42,.92)) !important; border:1px solid rgba(90,140,255,.16) !important; box-shadow:0 18px 48px rgba(1,6,24,.55), inset 0 1px 0 rgba(180,210,255,.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,#4d94ff,#1246d6); 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(90,150,255,.16), transparent 70%); pointer-events:none; opacity:.7; } .step-card:hover{ transform:translateY(-2px); border-color:rgba(110,165,255,.34) !important; box-shadow:0 24px 60px rgba(2,10,40,.6), inset 0 1px 0 rgba(190,215,255,.16) !important; } .step-card:hover::before{opacity:.5;} /* ---- active: electric rim like the banner ---- */ .step-card.active{ background: linear-gradient(180deg, rgba(150,190,255,.12), rgba(150,190,255,0) 45%), linear-gradient(135deg, rgba(20,52,140,.92), rgba(7,20,58,.95)) !important; border-color:rgba(120,175,255,.55) !important; box-shadow: 0 0 0 1px rgba(120,175,255,.18), 0 26px 70px rgba(18,80,220,.34), inset 0 1px 0 rgba(200,225,255,.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:#bcd4ff !important; background:linear-gradient(150deg, rgba(80,140,255,.20), rgba(20,50,130,.30)) !important; border:1px solid rgba(120,175,255,.28) !important; box-shadow:inset 0 1px 0 rgba(190,220,255,.20) !important; transition:all .35s ease; } .step-card.active .step-number{ color:#fff !important; background:linear-gradient(150deg,#3f81ff,#1447d8) !important; border-color:rgba(160,200,255,.55) !important; box-shadow:0 6px 20px rgba(31,109,255,.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:#f2f7ff !important; margin-bottom:6px !important; } .step-text p{ font-size:14.5px !important; line-height:1.55 !important; color:#93a9d8 !important; margin-bottom:0 !important; } .step-card.active .step-text p{color:#b9cbef !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%,#b9d0f7 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;} }