/* ============================================================ 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:#0f0106; /* darkest corners */ --noir-navy:#26030d; /* base page navy */ --noir-navy-2:#400617; /* mid navy (banner body) */ --noir-royal:#8f0b38; /* royal blue */ --noir-blue:#ff1678; /* electric blue (primary) */ --noir-blue-bright:#ff4da0;/* highlight */ --noir-ice:#ffa9cd; /* pale blue text */ /* override the clone's monochrome tokens */ --bg-color:#26030d; --text-primary:#fff2f7; --text-secondary:#d893ae; /* was grey #86868b */ --accent-color:#ffffff; --localnav-body:#340613; /* was #121212 grey */ --localnav-body-alpha:rgba(52,6,19,.82); --localnav-outline:#8f1b45; } /* ---- 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:#45071c !important; background-image: radial-gradient(60% 46% at 50% 78%, rgba(255,38,140,.55), transparent 70%), radial-gradient(80% 52% at 50% 104%, rgba(255,70,172,.50), transparent 72%), radial-gradient(46% 34% at 86% 4%, rgba(225,24,103,.28), transparent 70%), linear-gradient(180deg, #28030e 0%, #45071c 45%, #750b31 80%, #a01044 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%, #7e1037 -30%, #40061a 45%, #45071c 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(130,10,48,.85) 0%, rgba(240,24,110,.42) 55%, rgba(255,77,160,.16) 72%, transparent 100%) !important; } /* ---- city skyline: greyscale PNG → blue tint ---- */ .skyline-image{ filter:sepia(1) saturate(5.5) hue-rotate(300deg) brightness(.85) !important; } /* ---- primary CTA → electric blue, white text ---- */ .cta-button, .hero-cta-button{ background:linear-gradient(135deg,#ff2f89,#d90b4d) !important; color:#fff !important; border:none !important; box-shadow:0 6px 24px rgba(255,22,120,.55), inset 0 1px 0 rgba(255,255,255,.30) !important; } .cta-button:hover, .hero-cta-button:hover{ background:linear-gradient(135deg,#ff4da0,#f01664) !important; box-shadow:0 12px 34px rgba(255,22,120,.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(52,6,19,.82) !important; border:1px solid rgba(255,77,160,.26) !important; box-shadow:0 10px 38px rgba(28,2,10,.65), inset 0 0 0 1px rgba(255,77,160,.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(255,22,120,.11), rgba(143,11,56,.06)) !important; border:1px solid rgba(255,77,160,.20) !important; box-shadow:0 12px 40px rgba(40,2,13,.45), inset 0 1px 0 rgba(255,140,188,.10) !important; } .glass-card:hover, .step-card:hover, .security-card:hover, .font-btn:hover{ border-color:rgba(255,77,160,.38) !important; box-shadow:0 16px 48px rgba(255,22,120,.28), inset 0 1px 0 rgba(255,160,201,.16) !important; } /* active states pick up the electric accent */ .step-card.active, .strategy-alert.active{ background:linear-gradient(135deg, rgba(255,22,120,.22), rgba(143,11,56,.12)) !important; border-color:rgba(255,77,160,.55) !important; box-shadow:0 0 0 1px rgba(255,77,160,.25), 0 14px 44px rgba(255,22,120,.35) !important; } .glass-card:before{background:linear-gradient(135deg, rgba(255,77,160,.14), rgba(255,22,120,.04)) !important;} /* ---- step numbers / icon chips ---- */ .step-number{ border-color:rgba(255,77,160,.45) !important; color:#ffcde2 !important; box-shadow:0 0 18px rgba(255,22,120,.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:#d893ae !important;} /* ---- dividers / hairlines ---- */ .metric-divider, .security-card-divider, hr{background-color:rgba(255,77,160,.28) !important;border-color:rgba(255,77,160,.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(255,120,174,.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,140,188,.07), rgba(255,140,188,0) 42%), linear-gradient(135deg, rgba(86,12,37,.85), rgba(42,5,16,.92)) !important; border:1px solid rgba(255,90,151,.16) !important; box-shadow:0 18px 48px rgba(24,1,8,.55), inset 0 1px 0 rgba(255,180,215,.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,#ff4da0,#d61253); 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(255,90,161,.16), transparent 70%); pointer-events:none; opacity:.7; } .step-card:hover{ transform:translateY(-2px); border-color:rgba(255,110,175,.34) !important; box-shadow:0 24px 60px rgba(40,2,13,.6), inset 0 1px 0 rgba(255,190,219,.16) !important; } .step-card:hover::before{opacity:.5;} /* ---- active: electric rim like the banner ---- */ .step-card.active{ background: linear-gradient(180deg, rgba(255,150,197,.12), rgba(255,150,197,0) 45%), linear-gradient(135deg, rgba(140,20,60,.92), rgba(58,7,23,.95)) !important; border-color:rgba(255,120,184,.55) !important; box-shadow: 0 0 0 1px rgba(255,120,184,.18), 0 26px 70px rgba(220,18,93,.34), inset 0 1px 0 rgba(255,200,229,.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:#ffbcd8 !important; background:linear-gradient(150deg, rgba(255,80,152,.20), rgba(130,20,57,.30)) !important; border:1px solid rgba(255,120,184,.28) !important; box-shadow:inset 0 1px 0 rgba(255,190,224,.20) !important; transition:all .35s ease; } .step-card.active .step-number{ color:#fff !important; background:linear-gradient(150deg,#ff3f8e,#d81454) !important; border-color:rgba(255,160,206,.55) !important; box-shadow:0 6px 20px rgba(255,31,124,.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:#fff2f8 !important; margin-bottom:6px !important; } .step-text p{ font-size:14.5px !important; line-height:1.55 !important; color:#d893ae !important; margin-bottom:0 !important; } .step-card.active .step-text p{color:#efb9cf !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%,#f7b9d4 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:#f0a8c7; text-decoration:none; border:1px solid rgba(255,90,151,.18); background:linear-gradient(150deg, rgba(255,80,152,.10), rgba(130,20,57,.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(255,120,184,.45); background:linear-gradient(150deg, rgba(255,90,161,.22), rgba(150,24,68,.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:#f08fba; padding:7px 14px; border-radius:999px; border:1px solid rgba(255,90,151,.20); background:linear-gradient(150deg, rgba(255,80,152,.10), rgba(130,20,57,.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(28,2,10,.8), 0 0 3px rgba(28,2,10,.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; } }