/* manta: theme-desktop (agent-owned) Desktop (>=1024px) readability & contrast. Pure CSS, font-family agnostic (sizes/weights/colors/shadows only). NOTE: Nuxt appends the /_nuxt/*.css chunks to AFTER the /inject/*.css links at hydration time, so any property the bundle also sets needs !important here (equal specificity loses on source order). */ @media (min-width: 1024px) { /* ---------- 1. announcement bar: enforce the intended dark scheme (theme.css rule is beaten by the chunk CSS) ---------- */ .header-announcement-bar[data-scheme="manta-blue"] { background-color: #0d0d0f !important; color: #fff !important; } .header-announcement-bar[data-scheme="manta-blue"] .header-announcement-bar-link { color: #95bfff !important; text-underline-offset: .2em; } .header-announcement-bar[data-scheme="manta-blue"] .header-announcement-bar-link:hover, .header-announcement-bar[data-scheme="manta-blue"] .header-announcement-bar-link:focus-visible { color: #c4dbff !important; text-decoration: underline; } /* ---------- 2. text blocks that sit on the cube: soft dark vignette behind the block + stronger halo ---------- */ .section-text-card .section-text-card-inner, .section-text-card-side .section-text-card-side-inner, .section-logoCards .section-logoCards-header { position: relative; isolation: isolate; filter: drop-shadow(0 0 2.4rem rgba(0,0,0,.85)) drop-shadow(0 .2rem .8rem rgba(0,0,0,.7)) !important; } /* centered blocks: vignette sized to the text column, never wider than the block (no horizontal overflow) */ .section-text-card .section-text-card-inner::before, .section-logoCards .section-logoCards-header::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; width: min(80rem, 100%); height: calc(100% + 18rem); transform: translate(-50%, -50%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.84) 0%, rgba(0,0,0,.62) 38%, rgba(0,0,0,.3) 70%, rgba(0,0,0,0) 100%); } /* use-cases header sits on the brightest (blurred) cube frame: wider, softer falloff so it reads as shade, not a blob */ .section-logoCards .section-logoCards-header::before { width: min(96rem, 100%); height: calc(100% + 26rem); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.76) 0%, rgba(0,0,0,.6) 28%, rgba(0,0,0,.34) 58%, rgba(0,0,0,.12) 84%, rgba(0,0,0,0) 100%); } /* side blocks (Routing / Dark Orders / Cashback / Token): stay inside the page padding */ .section-text-card-side .section-text-card-side-inner::before { content: ""; position: absolute; z-index: -1; pointer-events: none; left: 50%; top: 50%; width: calc(100% + 7rem); height: calc(100% + 12rem); transform: translate(-50%, -50%); background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,0,0,.8) 0%, rgba(0,0,0,.52) 45%, rgba(0,0,0,0) 100%); } .section-text-card .section-text-card-heading, .section-text-card .section-text-card-text, .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, .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(0,0,0,.9), 0 0 1.6rem rgba(0,0,0,.85); } /* ---------- 3. hero: title + sub-line over the cube ---------- */ .section-hero .section-hero-inner { filter: drop-shadow(0 0 3rem rgba(0,0,0,.75)) drop-shadow(0 .2rem 1rem rgba(0,0,0,.55)) !important; } .section-hero .section-hero-body p, .section-hero .section-hero-word { text-shadow: 0 .1rem .4rem rgba(0,0,0,.85), 0 0 2rem rgba(0,0,0,.7); } /* ---------- 4. use-cases cards: light frosted grey gave white 14px mono text 3.2-4.4:1 -> dark glass, same blur ---------- */ .section-logoCards .section-logoCards-cards .section-logoCards-card { background-color: rgba(44,48,62,.72) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 1rem 3rem rgba(0,0,0,.28); /* inset ring instead of a border: no layout shift */ } .section-logoCards .section-logoCards-cards .section-logoCards-card .section-logoCards-card-index { color: #c9d3e6; } /* secondary, still >= 9:1 */ /* ---------- 5. blue CTAs (#95bfff bg / black text = 11.2:1): lift them off the cube, solid hover (no translucent muddy state) ---------- */ .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"] { box-shadow: 0 .3rem 1.2rem rgba(0,0,0,.35); } .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: #b3cfff !important; } /* ---------- 6. word cloud: decorative grey (#aab6c8, 9:1 on black) keeps a halo when the cube swings behind it ---------- */ .section-wordCloud .section-wordCloud-cloud .section-wordCloud-item { text-shadow: 0 .1rem .6rem rgba(0,0,0,.65); } /* ---------- 7. footer: links .88 (14:1) from theme.css; keep hover at full white, copyright readable ---------- */ .footer-main .footer-inner .footer-content .footer-links .footer-link a:hover { opacity: 1 !important; } .footer-main .footer-copyright { opacity: .92; } }