/* manta: palette "paper" (white theme). Seeded by apply_choice.py --palette paper, then hand-refined. * Loads LAST in . Nuxt re-appends the /_nuxt/*.css chunks at hydration, so every property the bundle * (or an earlier inject/*.css) also sets carries !important here. Font-family is never touched. */ /* ---------- tokens ---------- */ :root { --color-bg: #f6f7f9; --color-text: #0b0f14; --manta-accent: #1f5eff; --manta-accent-hover: #174fe0; --manta-secondary: #4b5563; --manta-muted: #6b7686; --manta-surface: #ffffff; --manta-line: rgba(11, 15, 20, .08); --manta-halo: rgba(255, 255, 255, .9); } html, body { background: #f6f7f9 !important; color: #0b0f14 !important; } a:focus-visible, button:focus-visible { outline: 2px solid #1f5eff !important; outline-offset: 3px; } .header-main .header-nav-link:focus-visible, .header-main .header-nav-submenu-link:focus-visible, .header-main .manta-actions a:focus-visible, .header-main .manta-actions-mobile a:focus-visible, .header-main .manta-mobile-extra a:focus-visible, .header-main .header-nav-mobile-toggle:focus-visible, .header-main .header-announcement-bar-close:focus-visible { outline-color: #1f5eff !important; } /* ---------- header: light scrim (was black-to-transparent), dark ink, logo follows currentColor ---------- * near-solid through the whole control row (42% = ~78px desktop / ~65px mobile clears the logo / X / App row), * then falls off, so blue CTAs and headings scrolling under the header no longer ghost through the nav */ .header-main { background-image: linear-gradient(180deg, rgba(246,247,249,.98) 0, rgba(246,247,249,.96) 42%, rgba(246,247,249,.74) 60%, rgba(246,247,249,.36) 78%, rgba(246,247,249,.1) 90%, rgba(246,247,249,0) 100%) !important; color: #0b0f14 !important; } .header-main .svg-logo text { fill: currentColor; } .header-main.is-mobile-submenu-open { color: #0b0f14 !important; } .header-nav-desktop .header-nav-list .header-nav-link { color: #0b0f14 !important; } .header-nav-desktop .header-nav-list:hover .header-nav-link { color: #5f6a79 !important; } /* dimmed siblings: 5.1:1 on the scrim */ .header-nav-desktop .header-nav-list .header-nav-item.is-active .header-nav-link, .header-nav-desktop .header-nav-list .header-nav-item:hover .header-nav-link { color: #0b0f14 !important; } /* dropdown: white sheet with a hairline + soft shadow instead of the indigo slab */ .header-nav-desktop .header-nav-bg { background-color: #ffffff !important; border-bottom: 1px solid rgba(11, 15, 20, .08); box-shadow: 0 2.4rem 6rem rgba(11, 15, 20, .08); } .header-nav-submenu { background: none !important; } .header-nav-submenu-link, .header-nav-submenu-item a { color: #0b0f14 !important; } .header-nav-submenu-description, .header-nav-submenu-item p { color: #4b5563 !important; } /* mobile menu: white panel, dark ink (subpanel is already white/black in the bundle) */ .header-nav-mobile .header-nav-mobile-panel { background-color: #ffffff !important; color: #0b0f14 !important; } .header-nav-mobile-link, .header-nav-mobile-toggle, .header-nav-mobile-back { color: #0b0f14 !important; } /* Docs / X / App actions (markup from inject/header.js, base styles in inject/theme-header.css) */ .manta-actions .manta-docs:hover { color: #1f5eff !important; } .manta-actions .manta-x { border-color: rgba(11, 15, 20, .45) !important; } /* control boundary >= 3:1 (WCAG 1.4.11) */ .manta-actions .manta-x:hover { color: #1f5eff !important; border-color: #1f5eff !important; } .manta-app, .manta-actions .manta-app, .manta-mobile-extra .manta-app { background: #1f5eff !important; color: #ffffff !important; } .manta-app:hover, .manta-actions .manta-app:hover, .manta-mobile-extra .manta-app:hover { background: #174fe0 !important; } .manta-app small { opacity: 1 !important; font-size: 1.1rem !important; } /* "SOON": 5.1:1 on the blue, 11px (size only) */ .manta-actions-mobile .manta-app { background: none !important; color: #ffffff !important; } .manta-actions-mobile .manta-app:before { background: #1f5eff !important; } .manta-actions-mobile .manta-x { color: #0b0f14 !important; } .manta-actions-mobile .manta-x:before { border-color: rgba(11, 15, 20, .45) !important; } .manta-mobile-row a.manta-x-text { color: #0b0f14 !important; } /* ---------- announcement bar: ink slab, white text, soft blue link ---------- */ .header-announcement-bar[data-scheme] { background: #0b0f14 !important; color: #ffffff !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; } .header-announcement-bar[data-scheme] .header-announcement-bar-link { color: #8fb4ff !important; } .header-announcement-bar[data-scheme] .header-announcement-bar-link:hover, .header-announcement-bar[data-scheme] .header-announcement-bar-link:focus-visible { color: #c4dbff !important; } /* ---------- type colours ---------- */ h1, h2, h3, .section-hero-word, .section-hero-sub, .section-hero-body p, .section-text-card-heading, .section-text-card-text, .section-logoCards-heading, .section-logoCards-text, .section-wordCloud-heading, .section-wordCloud-text, .section-imgCards-heading, .section-imgCards-text, .section-text-card-side-heading, .section-logoCards-card-heading, .section-imgCards-card-heading, .section-text-card-side-cta, .section-logoCards-card-cta, .section-imgCards-card-cta { color: #0b0f14 !important; } .section-text-card-side-text, .section-logoCards-card-text, .section-imgCards-card-text { color: #4b5563 !important; } .section-logoCards-card-index { color: #4b5563 !important; } /* 14px on the frosted card: secondary ink (>= 4.8:1), muted #6b7686 failed AA there */ /* ---------- blue CTAs: electric blue, white label, 4px corners + soft lift (same shape as the header App button) ---------- */ .section-hero .section-hero-inner .section-hero-cta, .section-text-card .section-text-card-inner [class$="-cta"], .section-logoCards .section-logoCards-header [class$="-cta"], .section-wordCloud .section-wordCloud-header [class$="-cta"], .section-imgCards .section-imgCards-header [class$="-cta"] { background-color: #1f5eff !important; color: #ffffff !important; border-radius: .4rem !important; box-shadow: 0 .2rem .6rem rgba(31, 94, 255, .18) !important; } .section-hero .section-hero-inner .section-hero-cta:hover, .section-text-card .section-text-card-inner [class$="-cta"]:hover, .section-logoCards .section-logoCards-header [class$="-cta"]:hover, .section-wordCloud .section-wordCloud-header [class$="-cta"]:hover, .section-imgCards .section-imgCards-header [class$="-cta"]:hover { background-color: #174fe0 !important; } /* ---------- text over the cube: light halos replace the dark vignettes / shadows ---------- */ .section-hero .section-hero-inner { filter: drop-shadow(0 0 2.4rem rgba(255,255,255,.85)) drop-shadow(0 .2rem .8rem rgba(255,255,255,.6)) !important; } .section-hero .section-hero-body p, .section-hero .section-hero-word { text-shadow: 0 .1rem .3rem rgba(255,255,255,.8), 0 0 1.6rem rgba(255,255,255,.9) !important; } /* 20px sub-line rides the cube's mid-blue: tighter, denser halo so it stays >= 4.5:1 on phones too */ .section-hero .section-hero-body p { text-shadow: 0 0 .3rem rgba(255,255,255,.95), 0 0 .9rem rgba(255,255,255,.95), 0 0 2rem rgba(255,255,255,.9) !important; } /* section 2 (centred text card) keeps its soft paper vignette: the cube is a small blurred frame there */ .section-text-card .section-text-card-inner { filter: drop-shadow(0 0 2rem rgba(255,255,255,.9)) drop-shadow(0 .2rem .8rem rgba(255,255,255,.7)) !important; } .section-text-card .section-text-card-inner::before { background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(246,247,249,.94) 0%, rgba(246,247,249,.8) 36%, rgba(246,247,249,.42) 68%, rgba(246,247,249,0) 100%) !important; } .section-text-card .section-text-card-heading, .section-text-card .section-text-card-text, .section-logoCards .section-logoCards-heading, .section-logoCards .section-logoCards-text, .section-imgCards .section-imgCards-heading, .section-imgCards .section-imgCards-text, .section-wordCloud .section-wordCloud-heading, .section-wordCloud .section-wordCloud-text { text-shadow: 0 .1rem .3rem rgba(255,255,255,.85), 0 0 1.6rem rgba(255,255,255,.9) !important; } /* ---------- one glass device at every width ---------- * product text blocks (Routing / Dark Orders / Cashback / Token): frosted paper panel, breakpoint-free. * theme.css / theme-mobile.css paint it dark on phones, theme-desktop.css fogged it with a white oval on desktop; * both are replaced by the same recipe the use-case cards use (white .8, hairline ring, soft ink shadow). */ .section-text-card-side .section-text-card-side-inner { position: relative; padding: 2.4rem 2.4rem 2.6rem; border-radius: 1.2rem; background: rgba(255, 255, 255, .86) !important; /* same frost as the use-case cards (one glass recipe) */ box-shadow: inset 0 0 0 1px rgba(11, 15, 20, .08), 0 1.2rem 3.2rem rgba(11, 15, 20, .06) !important; -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; filter: none !important; } .section-text-card-side .section-text-card-side-inner::before { content: none !important; background: none !important; filter: none !important; } /* theme-desktop.css still declares the black radial; neutralised even if a reorder ever re-enables content */ .section-text-card-side .section-text-card-side-heading, .section-text-card-side .section-text-card-side-text, .section-text-card-side .cta-group .section-text-card-side-cta { text-shadow: none !important; } /* use-cases header (centred, full width): a full-bleed paper band with a vertical fade replaces the white oval + fog filter. * ::before geometry (height: 100% + 26rem, centred) comes from theme-desktop.css; only width and paint change here. */ .section-logoCards .section-logoCards-header { filter: none !important; } .section-logoCards .section-logoCards-header::before { width: 100% !important; background: linear-gradient(180deg, rgba(246,247,249,0) 0%, rgba(246,247,249,.86) 28%, rgba(246,247,249,.86) 72%, rgba(246,247,249,0) 100%) !important; } /* ---------- use-case cards: white frosted glass, hairline ring, dark ink (theme-desktop.css made them dark glass) ---------- */ .section-logoCards .section-logoCards-cards .section-logoCards-card { background-color: rgba(255, 255, 255, .86) !important; /* .86 (was .7): the cube rotates under the cards; at .8 the index/body ink still dipped to 4.88:1 on card 04, .86 holds >= 5.4:1 over the blurred darkest face */ color: #0b0f14 !important; box-shadow: inset 0 0 0 1px rgba(11, 15, 20, .08), 0 1.2rem 3.2rem rgba(11, 15, 20, .06) !important; } .section-logoCards .section-logoCards-cards .section-logoCards-card .section-logoCards-card-index { color: #4b5563 !important; } /* ---------- word cloud: decorative 36px bold, airy grey (3:1 on paper = large-text AA); no halo needed on paper ---------- */ .section-wordCloud .section-wordCloud-cloud { color: #8590a0 !important; } .section-wordCloud-item, .section-wordCloud .section-wordCloud-cloud .section-wordCloud-item { color: #8590a0 !important; opacity: 1; text-shadow: none !important; } /* ---------- footer: the same ink as the announcement bar (one dark at both ends of the page); CSS wordmark inherits white ---------- */ .footer-main { background: #0b0f14 !important; color: #ffffff !important; } .footer-main .footer-inner .footer-content .footer-links .footer-link a { opacity: .8 !important; } .footer-main .footer-inner .footer-content .footer-links .footer-link a:hover, .footer-main .footer-inner .footer-content .footer-links .footer-link a:focus-visible { opacity: 1 !important; } /* ---------- skip link: ink token instead of the bundle's #000 ---------- */ .skip-link, .skip-link:focus { background: #0b0f14 !important; color: #ffffff !important; } /* hide Docs / API / Contact cards — keep only Twitter in header/footer */ .section-imgCards-cards{display:none!important}