/* DiamondX unified stylesheet — base.css Version: 2025.11.10-02 (clean) Theme switch: add/remove `light` class on */ /* ============================ 1) TOKENS & THEMES ============================ */ :root { /* Brand */ --dx-cyan: #1FDDFE; --dx-emerald: #10B981; --dx-gold: #F4B73E; /* Surfaces (dark) */ --bg1: #0b2f53; /* deep teal */ --bg2: #0a2240; /* navy */ --bg3: #0b0b10; /* charcoal */ --bg-elev: rgba(255,255,255,.06); --surface: rgba(255,255,255,.03); /* Text & lines (dark) */ --text: #ffffff; --text-dim: rgba(255,255,255,.65); --line: rgba(255,255,255,.12); /* Glass panels gradient stops */ --panel-top: rgba(255,255,255,.06); --panel-bot: rgba(255,255,255,.03); /* Legacy compatibility */ --bg: var(--bg3); --primary: var(--dx-emerald); --accent: var(--dx-gold); /* Radius tokens */ --radius-lg: 16px; --radius-md: 12px; --radius-sm: 8px; /* Shadow tokens */ --shadow-1: 0 10px 30px rgba(0,0,0,.30); --shadow-2: 0 20px 50px rgba(0,0,0,.45); /* Light mode shadows - stronger for better depth */ --shadow-1-light: 0 4px 12px rgba(0,0,0,.15); --shadow-2-light: 0 8px 24px rgba(0,0,0,.2); /* Card hover transition */ --card-hover: transform .25s ease, box-shadow .25s ease, opacity .25s ease; } /* Explicit color-scheme control - prevents browser from forcing light mode */ html { color-scheme: dark light; } html:not(.light) { color-scheme: dark; } html.light { color-scheme: light; /* Light tokens - Enhanced for better readability */ --text: #000000; /* Pure black for maximum contrast */ --text-dim: rgba(0,0,0,.8); /* Increased from .62 to .8 for better readability */ --line: rgba(0,0,0,.2); /* Increased from .12 to .2 for stronger borders */ /* Solid white panels for maximum text contrast */ --panel-top: #ffffff; --panel-bot: #ffffff; } /* Backgrounds */ /* Default: Dark mode (works for all browsers including Chrome) */ /* Force dark mode even when browser/device forces light mode */ body { background: radial-gradient( ellipse at 50% -10%, var(--bg1), var(--bg2) 35%, var(--bg3) 100% ) fixed !important; color: var(--text) !important; } /* Explicit dark mode enforcement - override browser-forced light mode */ html:not(.light) body { background: radial-gradient( ellipse at 50% -10%, var(--bg1), var(--bg2) 35%, var(--bg3) 100% ) fixed !important; color: var(--text) !important; } /* Light mode override (explicit class takes precedence) */ html.light body { /* White/blue gradient background for light mode */ background: radial-gradient(ellipse at 50% -10%, #ffffff 0%, #f8f9ff 35%, #f0f4ff 100%) fixed !important; color: var(--text) !important; } /* ============================ 2) RESETS & TYPOGRAPHY ============================ */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; color: var(--text); font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { display:block; max-width:100%; height:auto; } a { color: inherit; text-decoration: none; } :focus-visible { outline: 2px solid var(--dx-cyan); outline-offset: 2px; } /* ============================ 3) UTILITIES ============================ */ .text-muted { color: var(--text-dim); } .text-dim { color: var(--text-dim); } .lift { transition: transform .2s ease, box-shadow .2s ease; } .lift:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.2); } .text-gradient { background: var(--grad, linear-gradient(135deg, var(--dx-cyan), var(--dx-gold))); -webkit-background-clip: text; background-clip: text; color: transparent; } .section-divider { border-top:1px solid var(--line); border-bottom:1px solid var(--line); } /* Reduce top border visual weight for carousel */ .partners-carousel.section-divider { border-top: 1px solid var(--line); margin-top: 0; } /* Layout Utilities (replacing Tailwind) */ .container { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .wrap { max-width: 980px; margin: 0 auto; } .flex { display: flex; } .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .min-h-screen { min-height: 100vh; } .flex-1 { flex: 1 1 0%; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } /* Text utilities */ .text-center { text-align: center; } .text-xs { font-size: 0.75rem; } .text-sm { font-size: 0.875rem; } .text-lg { font-size: 1.125rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; } .text-5xl { font-size: 3rem; } .text-6xl { font-size: 3.75rem; } .text-7xl { font-size: 4.5rem; } .text-8xl { font-size: 6rem; } .font-bold { font-weight: 700; } .font-semibold { font-weight: 600; } .font-extrabold { font-weight: 800; } .leading-tight { line-height: 1.25; } .leading-none { line-height: 1; } .leading-relaxed { line-height: 1.75; } .leading-\[1\.1\] { line-height: 1.1; } .tracking-tight { letter-spacing: -0.025em; } .tracking-tighter { letter-spacing: -0.05em; } /* Spacing utilities */ .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-5 { margin-top: 1.25rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mt-10 { margin-top: 2.5rem; } .mt-12 { margin-top: 3rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-8 { margin-bottom: 2rem; } .mb-10 { margin-bottom: 2.5rem; } .mb-12 { margin-bottom: 3rem; } /* Space-y utilities (vertical spacing between children) */ .space-y-2 > * + * { margin-top: 0.5rem; } .space-y-3 > * + * { margin-top: 0.75rem; } .space-y-4 > * + * { margin-top: 1rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-16 { padding-top: 4rem; padding-bottom: 4rem; } .py-20 { padding-top: 5rem; padding-bottom: 5rem; } .p-4 { padding: 1rem; } .p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } /* Grid utilities */ .grid { display: grid; } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } /* Responsive grid columns */ @media (min-width: 768px) { .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:flex-row { flex-direction: row; } .md\:hidden { display: none; } } .inline-grid { display: inline-grid; } .justify-items-center { justify-items: center; } .align-top { vertical-align: top; } .items-start { align-items: flex-start; } .opacity-80 { opacity: 0.8; } .block { display: block; } .font-black { font-weight: 900; } @media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .md\:grid-cols-\[1fr_minmax\(0\,820px\)_1fr\] { grid-template-columns: 1fr minmax(0, 820px) 1fr; } .md\:grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; } .md\:gap-3 { gap: 0.75rem; } .md\:gap-4 { gap: 1rem; } .md\:gap-6 { gap: 1.5rem; } .md\:gap-8 { gap: 2rem; } .md\:justify-end { justify-content: flex-end; } .md\:text-4xl { font-size: 2.25rem; } .md\:text-6xl { font-size: 3.75rem; } .md\:text-7xl { font-size: 4.5rem; } .md\:text-xl { font-size: 1.25rem; } .md\:hidden { display: none; } .md\:mt-6 { margin-top: 1.5rem; } .md\:mt-10 { margin-top: 2.5rem; } .md\:mt-12 { margin-top: 3rem; } .md\:mt-16 { margin-top: 4rem; } .md\:py-32 { padding-top: 8rem; padding-bottom: 8rem; } } @media (min-width: 1024px) { .lg\:text-8xl { font-size: 6rem; } } /* Position utilities */ .relative { position: relative; } .overflow-hidden { overflow: hidden; } /* Size utilities */ .h-4 { height: 1rem; } .h-7 { height: 1.75rem; } .w-4 { width: 1rem; } .w-auto { width: auto; } .w-full { width: 100%; } .h-auto { height: auto; } .max-w-2xl { max-width: 42rem; } .max-w-4xl { max-width: 56rem; } .max-w-md { max-width: 28rem; } /* Border radius */ .rounded { border-radius: 0.25rem; } .rounded-\[18px\] { border-radius: 18px; } .rounded-\[20px\] { border-radius: 20px; } .rounded-\[30px\] { border-radius: 30px; } .rounded-full { border-radius: 9999px; } /* Object fit */ .object-cover { object-fit: cover; } /* Auto margins */ .mx-auto { margin-left: auto; margin-right: auto; } /* Justify self */ .justify-self-end { justify-self: end; } /* Display utilities */ .hidden { display: none; } /* Padding utilities */ .p-1 { padding: 0.25rem; } .p-2 { padding: 0.5rem; } .p-3 { padding: 0.75rem; } .p-8 { padding: 2rem; } .p-12 { padding: 3rem; } @media (min-width: 768px) { .md\:p-2 { padding: 0.5rem; } .md\:p-4 { padding: 1rem; } .md\:p-12 { padding: 3rem; } .md\:block { display: block; } } /* Text size utilities */ .text-xl { font-size: 1.25rem; } /* Margin utilities */ .mt-1 { margin-top: 0.25rem; } /* Text color overrides for light mode */ html.light .text-white\/90, html.light .text-white\/70, html.light .text-white\/60 { color: var(--text-dim) !important; } /* Skeleton shimmer */ .skeleton { color:transparent !important; border-radius:.5rem; background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.18), rgba(255,255,255,.06)); background-size:200% 100%; animation: shimmer 1.1s linear infinite; } /* Light mode skeleton - use class selector instead of media query */ html.light .skeleton { background: linear-gradient(90deg, rgba(0,0,0,.06), rgba(0,0,0,.12), rgba(0,0,0,.06)); } @keyframes shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .lift, .hero-scroll { transition:none !important; animation:none !important; } .hero-background { animation: none !important; } .hero-letter { animation: none !important; } .hero-headline, .hero-subheadline, .hero-cta, .tagline, .hero-trust-indicators, .hero-trust-badges { animation: none !important; } .hero-anchor { animation: none !important; } .hero-scroll-indicator { animation: none !important; } .scroll-wheel, .scroll-arrow { animation: none !important; } .rotating-text { transition: none !important; } html { scroll-behavior: auto !important; } } /* ============================ 4) COMPONENTS ============================ */ /* Panels */ .panel { position: relative; background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); border: 1px solid var(--line); border-radius: 16px; backdrop-filter: blur(8px); color: var(--text); } .panel::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } /* Light mode panel adjustments */ html.light .panel { background: var(--panel-top); box-shadow: var(--shadow-1-light); } html.light .panel::after { box-shadow: inset 0 1px 0 rgba(0,0,0,.05); } /* Buttons */ .btn { display:inline-flex; align-items:center; gap:.5rem; border:1px solid var(--line); border-radius:999px; padding:0 .9rem; height:42px; } .btn-sm{ height:36px; padding:0 .75rem; font-size:.875rem; } .btn-md{ height:42px; } .btn-lg{ height:48px; padding:0 1.1rem; font-weight:600; } /* Primary (GREEN, with glow) */ .btn-primary{ color:#061a12; background: linear-gradient(180deg,#58e5b9 0%, var(--dx-emerald) 100%); border: 1px solid rgba(0,0,0,.22); box-shadow: 0 0 0 1px rgba(16,185,129,.28), 0 12px 24px rgba(16,185,129,.20), 0 40px 80px rgba(16,185,129,.10); transition: transform .15s ease; } .btn-primary:hover{ transform: translateY(-1px); } /* Blue (no glow) */ .btn-blue{ color:#07131e; background: linear-gradient(180deg,#69d2ff 0%, var(--dx-cyan) 100%); border: 1px solid rgba(0,0,0,.22); box-shadow: none; } /* Gold */ .btn-gold{ background:linear-gradient(135deg,#f7c24a,#d99a0b); color:#0b0b10; border-color: rgba(0,0,0,.2); } .btn-ghost{ background:transparent; color:inherit; } /* Badges & chips */ .badge { display:inline-flex; align-items:center; padding:.25rem .5rem; border-radius:999px; border:1px solid var(--line); font-size:.75rem; } .pill-row { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; } .dx-feature-card[data-i="3"] .pill-row { justify-content:center; } .dx-feature-card[data-i="3"] .pill-row button { margin-top:.125rem; } .chip-scroller { display:flex; flex-wrap:wrap; gap:.5rem; } /* Ecosystem Deck Wrapper - for mobile scroll indicators */ .ecosystem-deck-wrapper { position: relative; /* Prevent browser navigation gestures */ overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; /* Prevent swipe navigation */ -webkit-overflow-scrolling: touch; } /* Desktop: hide scroll hints */ .ecosystem-deck-scroll-hint { display: none; } .ecosystem-deck-scroll-indicators { display: none; } /* Ecosystem Deck - Stacked Cards Layout */ .ecosystem-deck { position: relative; display: flex; justify-content: center; align-items: center; min-height: 600px; padding: 4rem 0 6rem 0; margin-top: 6rem; margin-bottom: 2rem; } /* Enhanced Ecosystem Cards - Deck Style (Straight Stack) */ .ecosystem-card { display: flex; flex-direction: column; overflow: hidden; position: absolute; width: 384px; min-width: 384px; max-width: 384px; min-height: 696px; height: 696px; cursor: pointer; opacity: 0; transform: translateY(30px); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform, z-index; border: none !important; } .ecosystem-card.animate-in { opacity: 1; transform: translateY(0); } /* Stack cards in original order from left to right: DX Trade (0) leftmost on top → DX Stream (1) → Diamond Hands (2) → DXFi (3) rightmost on bottom */ /* Increased horizontal spacing for better spread - adjusted for larger cards */ /* DX Trade: leftmost (z-index 4 - top) */ .ecosystem-card[data-i="0"] { z-index: 4; transform: translateX(-288px) translateY(20px); transition-delay: 0.1s; } /* DX Stream: second from left (z-index 3) */ .ecosystem-card[data-i="1"] { z-index: 3; transform: translateX(-96px) translateY(15px); transition-delay: 0.2s; } /* Diamond Hands: third from left (z-index 2) */ .ecosystem-card[data-i="2"] { z-index: 2; transform: translateX(96px) translateY(15px); transition-delay: 0.3s; } /* DXFi: rightmost (z-index 1 - bottom) */ .ecosystem-card[data-i="3"] { z-index: 1; transform: translateX(288px) translateY(20px); transition-delay: 0.4s; } /* On hover, bring card to front - scale forward without horizontal movement */ /* Each card preserves its original translateX position */ /* Only enable on larger screens where all 4 cards are visible */ @media (min-width: 1400px) { .ecosystem-card[data-i="0"]:hover { z-index: 10 !important; transform: translateX(-288px) translateY(-30px) scale(1.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .ecosystem-card[data-i="1"]:hover { z-index: 10 !important; transform: translateX(-96px) translateY(-30px) scale(1.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .ecosystem-card[data-i="2"]:hover { z-index: 10 !important; transform: translateX(96px) translateY(-30px) scale(1.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,.4); } .ecosystem-card[data-i="3"]:hover { z-index: 10 !important; transform: translateX(288px) translateY(-30px) scale(1.15) !important; box-shadow: 0 20px 60px rgba(0,0,0,.4); } } .ecosystem-card.animate-in[data-i="0"] { transform: translateX(-288px) translateY(20px); } .ecosystem-card.animate-in[data-i="1"] { transform: translateX(-96px) translateY(15px); } .ecosystem-card.animate-in[data-i="2"] { transform: translateX(96px) translateY(15px); } .ecosystem-card.animate-in[data-i="3"] { transform: translateX(288px) translateY(20px); } /* Diamond Hands image - show logo on left by positioning image to the right */ .ecosystem-card-hands .ecosystem-card-image { object-position: left center; } /* Image positioning adjustments for tablet and wider screens */ @media (min-width: 769px) { /* DX Stream card - show more of the bottom of the image */ .ecosystem-card-stream .ecosystem-card-image { object-position: center bottom; } /* Diamond Hands card - show more of the top of the image (logo area) */ .ecosystem-card-hands .ecosystem-card-image { object-position: left top; } } .ecosystem-card-media { position: relative; width: 100%; height: 260px; overflow: hidden; background: linear-gradient(135deg, var(--bg2) 0%, var(--bg3) 100%); } .ecosystem-card-image { width: 100%; height: 100%; object-fit: cover; object-position: center; transform: scale(0.9); transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .ecosystem-card:hover .ecosystem-card-image { transform: scale(0.95); } .ecosystem-card-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 70%, rgba(0,0,0,0.6) 100% ); pointer-events: none; } .ecosystem-card-trade .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(31,221,254,0.1) 0%, rgba(16,185,129,0.15) 70%, rgba(0,0,0,0.5) 100% ); } .ecosystem-card-stream .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(31,221,254,0.1) 0%, rgba(16,185,129,0.15) 70%, rgba(0,0,0,0.5) 100% ); } .ecosystem-card-hands .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(244,183,62,0.1) 0%, rgba(217,154,11,0.15) 70%, rgba(0,0,0,0.5) 100% ); } .ecosystem-card-dxfi .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(244,183,62,0.1) 0%, rgba(16,185,129,0.15) 70%, rgba(0,0,0,0.5) 100% ); } html.light .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.1) 70%, rgba(255,255,255,0.3) 100% ); } html.light .ecosystem-card-trade .ecosystem-card-overlay, html.light .ecosystem-card-stream .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(31,221,254,0.05) 0%, rgba(16,185,129,0.08) 70%, rgba(255,255,255,0.3) 100% ); } html.light .ecosystem-card-hands .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(244,183,62,0.05) 0%, rgba(217,154,11,0.08) 70%, rgba(255,255,255,0.3) 100% ); } html.light .ecosystem-card-dxfi .ecosystem-card-overlay { background: linear-gradient( to bottom, rgba(244,183,62,0.05) 0%, rgba(16,185,129,0.08) 70%, rgba(255,255,255,0.3) 100% ); } .ecosystem-card-badge { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 0.375rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.2); box-shadow: 0 4px 12px rgba(0,0,0,0.2); transition: all 0.3s ease; } .ecosystem-card-badge-live { background: linear-gradient(135deg, rgba(16,185,129,0.9) 0%, rgba(5,150,105,0.9) 100%); color: #ffffff; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 20px rgba(16,185,129,0.3); } .ecosystem-card-badge-coming { background: linear-gradient(135deg, rgba(244,183,62,0.9) 0%, rgba(217,154,11,0.9) 100%); color: #000000; box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 0 20px rgba(244,183,62,0.3); } html.light .ecosystem-card-badge { border: 1px solid rgba(0,0,0,0.1); box-shadow: 0 4px 12px rgba(0,0,0,0.1); } html.light .ecosystem-card-badge-live { box-shadow: 0 4px 12px rgba(16,185,129,0.2), 0 0 20px rgba(16,185,129,0.15); } html.light .ecosystem-card-badge-coming { box-shadow: 0 4px 12px rgba(244,183,62,0.2), 0 0 20px rgba(244,183,62,0.15); } .ecosystem-card:hover .ecosystem-card-badge-live { box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 30px rgba(16,185,129,0.4); transform: scale(1.05); } .ecosystem-card:hover .ecosystem-card-badge-coming { box-shadow: 0 6px 16px rgba(0,0,0,0.3), 0 0 30px rgba(244,183,62,0.4); transform: scale(1.05); } .ecosystem-card-content { flex: 1; display: flex; flex-direction: column; min-height: 0; height: 100%; overflow: hidden; background: rgba(15, 23, 42, 0.85); /* Dark navy blue with transparency */ backdrop-filter: blur(12px); position: relative; z-index: 1; } /* Light mode: use light semi-transparent background with brand blue tint */ html.light .ecosystem-card-content { background: rgba(255, 255, 255, 0.85); } .ecosystem-card-content p, .ecosystem-card-content ul { word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } /* Improve text readability in ecosystem cards - dark mode */ .ecosystem-card-content .text-muted, .ecosystem-card-content p.text-muted { color: rgba(255, 255, 255, 0.9) !important; } .ecosystem-card-content .text-sm.text-muted { color: rgba(255, 255, 255, 0.85) !important; } .ecosystem-card-content ul.text-muted { color: rgba(255, 255, 255, 0.85) !important; } .ecosystem-card-content ul.text-muted li { color: rgba(255, 255, 255, 0.85) !important; } /* Light mode: use dark text for readability */ html.light .ecosystem-card-content .text-muted, html.light .ecosystem-card-content p.text-muted { color: rgba(0, 0, 0, 0.85) !important; } html.light .ecosystem-card-content .text-sm.text-muted { color: rgba(0, 0, 0, 0.8) !important; } html.light .ecosystem-card-content ul.text-muted { color: rgba(0, 0, 0, 0.8) !important; } html.light .ecosystem-card-content ul.text-muted li { color: rgba(0, 0, 0, 0.8) !important; } .ecosystem-card-content ul { flex-shrink: 0; } /* Text sizes - increased for better readability */ .ecosystem-card-content p { font-size: 1.125rem; /* Increased from 1.0625rem (17px) to 18px */ margin-top: 0; margin-bottom: 0; } .ecosystem-card-content p + p { margin-top: 0; } .ecosystem-card-content .text-sm { font-size: 1.125rem; /* Increased from 1.0625rem to 18px */ } .ecosystem-card-content ul { font-size: 1rem; /* Increased from 0.9375rem (15px) to 16px */ margin-top: 0.75rem; /* Space between paragraph and bullet list */ margin-bottom: 0; padding-left: 1.25rem; } .ecosystem-card-content ul li { font-size: 1rem; /* Increased from 0.9375rem to 16px */ margin-top: 0; margin-bottom: 0; } .ecosystem-card-content p + ul { margin-top: 0.75rem; /* Space between paragraph and bullet list */ } .ecosystem-card-content .btn { font-size: 0.9375rem; /* Increased from 0.875rem (14px) to 15px */ padding: 0.5rem 1rem; } /* Position CTA buttons at the same aligned position at bottom */ .ecosystem-card-content .pill-row { margin-top: auto !important; /* Push to bottom, aligns all CTAs at same position */ margin-bottom: 0; padding-top: 1.5rem; /* Add spacing above buttons */ } .ecosystem-card-icon { font-size: 2.75rem; line-height: 1; margin-bottom: 0.5rem; } .ecosystem-card-title { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0 !important; } .ecosystem-card-tagline { font-size: 1rem; line-height: 1.5; margin-top: 0 !important; } .ecosystem-card-title + .ecosystem-card-tagline { margin-top: 0 !important; } /* All cards: spacing between title container and paragraph */ .ecosystem-card-content > div[style*="display: flex"] + .ecosystem-card-tagline { margin-top: 0.75rem !important; } /* Mobile: Horizontal swipeable carousel */ @media (max-width: 1024px) { /* Show scroll hints on mobile */ .ecosystem-deck-scroll-hint { display: block; text-align: center; font-size: 0.875rem; color: var(--text-dim); margin-bottom: 1rem; opacity: 0.7; } .scroll-arrow { display: inline-block; margin-left: 0.25rem; animation: slide-right 1.5s ease-in-out infinite; } @keyframes slide-right { 0%, 100% { transform: translateX(0); opacity: 0.7; } 50% { transform: translateX(8px); opacity: 1; } } .ecosystem-deck-scroll-indicators { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; padding: 0 1rem; } .scroll-indicator-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); transition: all 0.3s ease; pointer-events: none; } .scroll-indicator-dot.active { background: var(--dx-cyan); width: 24px; border-radius: 4px; box-shadow: 0 0 12px rgba(31, 221, 254, 0.5); } /* Make dots clickable on mouse devices */ @media (hover: hover) and (pointer: fine) { .scroll-indicator-dot { pointer-events: auto; cursor: pointer; } } /* Fade gradients on edges */ .ecosystem-deck-wrapper { position: relative; padding: 0 1rem; } .ecosystem-deck-wrapper::before, .ecosystem-deck-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 40px; pointer-events: none; z-index: 1; transition: opacity 0.3s ease; } .ecosystem-deck-wrapper::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); opacity: 0; } .ecosystem-deck-wrapper::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); opacity: 1; } .ecosystem-deck-wrapper.scrolled-left::before { opacity: 0.6; } .ecosystem-deck-wrapper.scrolled-right::after { opacity: 0; } @keyframes pulse-hint { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } /* Mobile: Vertical Accordion Layout - No horizontal scrolling! */ .ecosystem-deck-wrapper { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .ecosystem-deck-scroll-hint { display: none !important; } .ecosystem-deck-scroll-indicators { display: none !important; } .ecosystem-deck { display: flex !important; flex-direction: column !important; gap: 1.25rem !important; padding: 0 !important; margin: 0 !important; min-height: auto !important; width: 100% !important; overflow: visible !important; } /* Cards in vertical accordion - collapsed by default, expand on tap */ .ecosystem-card { position: relative !important; width: 100% !important; max-width: 100% !important; min-width: 100% !important; transform: none !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; z-index: auto !important; opacity: 1 !important; min-height: auto !important; height: auto !important; max-height: 220px !important; cursor: pointer !important; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important; border-radius: 16px !important; overflow: hidden !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* Expanded state */ .ecosystem-card.accordion-expanded { max-height: 2000px !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important; } /* Card content - hidden when collapsed */ .ecosystem-card .ecosystem-card-content { transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); overflow: hidden; } .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content { opacity: 0; max-height: 0; padding-top: 0 !important; padding-bottom: 0 !important; margin-top: 0 !important; } .ecosystem-card.accordion-expanded .ecosystem-card-content { opacity: 1; max-height: 2000px; padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } /* Card media - always visible, slightly smaller when collapsed */ .ecosystem-card-media { transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1); height: 220px !important; } .ecosystem-card.accordion-expanded .ecosystem-card-media { height: 260px !important; } /* Expand/collapse indicator - chevron in top right */ .ecosystem-card::after { content: '▼'; position: absolute; top: 1rem; right: 1rem; font-size: 1rem; color: white; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; z-index: 20; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; font-weight: bold; } .ecosystem-card.accordion-expanded::after { transform: rotate(180deg); background: rgba(0, 0, 0, 0.8); } /* Show icon and title overlay on collapsed cards */ .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content > div:first-child { position: absolute; bottom: 1rem; left: 1rem; right: 3.5rem; z-index: 10; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 50%, transparent 100%); padding: 1rem; border-radius: 12px; backdrop-filter: blur(8px); } .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content > div:first-child .ecosystem-card-icon { font-size: 2rem !important; margin-bottom: 0 !important; } .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content > div:first-child .ecosystem-card-title { font-size: 1.5rem !important; margin: 0 !important; color: white !important; } .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content > div:first-child + * { display: none; } .ecosystem-card:not(.accordion-expanded) .ecosystem-card-tagline, .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content > p, .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content > ul, .ecosystem-card:not(.accordion-expanded) .ecosystem-card-content > .pill-row { display: none !important; } } @media (max-width: 768px) { .ecosystem-deck { gap: 1rem; padding: 1rem 0.75rem 2rem 0.75rem; } .ecosystem-card { flex: 0 0 90%; width: 90%; min-width: 280px; } .ecosystem-card-media { height: 200px; } } /* Ecosystem Carousel */ .ecosystem-carousel { width: 100%; position: relative; opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .ecosystem-carousel.animate-in { opacity: 1; transform: translateY(0); } .ecosystem-carousel-header { margin-bottom: 2rem; } .ecosystem-carousel-wrapper { position: relative; width: 100%; overflow: hidden; border-radius: var(--radius-lg); } .ecosystem-carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); gap: 1.5rem; will-change: transform; } .ecosystem-carousel-slide { flex: 0 0 calc(33.333% - 1rem); min-width: 0; position: relative; border-radius: var(--radius-md); overflow: hidden; background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); border: 1px solid var(--line); box-shadow: var(--shadow-1); transition: transform 0.3s ease, box-shadow 0.3s ease; will-change: transform; } .ecosystem-carousel-slide img { will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .ecosystem-carousel-slide:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } .ecosystem-carousel-slide img { width: 100%; height: 280px; object-fit: cover; display: block; } .ecosystem-carousel-caption { padding: 1rem; text-align: center; font-weight: 600; font-size: 0.9375rem; color: var(--text); background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); border-top: 1px solid var(--line); } .ecosystem-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); border: 1px solid var(--line); color: var(--text); font-size: 1.5rem; font-weight: bold; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: var(--shadow-1); backdrop-filter: blur(8px); } .ecosystem-carousel-nav:hover { transform: translateY(-50%) scale(1.1); box-shadow: var(--shadow-2); background: linear-gradient(135deg, var(--dx-cyan) 0%, var(--dx-emerald) 100%); color: #ffffff; border-color: transparent; } .ecosystem-carousel-nav:active { transform: translateY(-50%) scale(0.95); } .ecosystem-carousel-prev { left: 1rem; } .ecosystem-carousel-next { right: 1rem; } .ecosystem-carousel-dots { display: flex; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; flex-wrap: wrap; } .ecosystem-carousel-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line); border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } .ecosystem-carousel-dot:hover { background: var(--text-dim); transform: scale(1.2); } .ecosystem-carousel-dot.active { background: var(--dx-emerald); width: 24px; border-radius: 5px; box-shadow: 0 0 12px rgba(16,185,129,0.4); } html.light .ecosystem-carousel-dot.active { box-shadow: 0 0 12px rgba(16,185,129,0.3); } @media (max-width: 1024px) { .ecosystem-carousel-slide { flex: 0 0 calc(50% - 0.75rem); } .ecosystem-carousel-slide img { height: 240px; } } @media (max-width: 768px) { .ecosystem-carousel-nav { display: none; } .ecosystem-carousel-slide { flex: 0 0 calc(100% - 0.5rem); scroll-snap-align: start; } .ecosystem-carousel-track { overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .ecosystem-carousel-track::-webkit-scrollbar { display: none; } .ecosystem-carousel-slide img { height: 200px; } } /* Synergy Visualization */ .ecosystem-synergy { width: 100%; position: relative; padding: 2rem 0; opacity: 0; transform: translateY(30px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } .ecosystem-synergy.animate-in { opacity: 1; transform: translateY(0); } .synergy-node { opacity: 0; transform: scale(0.9); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .ecosystem-synergy.animate-in .synergy-node { opacity: 1; transform: scale(1); } .ecosystem-synergy.animate-in .synergy-node:nth-child(1) { transition-delay: 0.1s; } .ecosystem-synergy.animate-in .synergy-node:nth-child(3) { transition-delay: 0.2s; } .ecosystem-synergy.animate-in .synergy-node:nth-child(5) { transition-delay: 0.3s; } .ecosystem-synergy.animate-in .synergy-node:nth-child(7) { transition-delay: 0.4s; } .synergy-arrow { opacity: 0; transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .ecosystem-synergy.animate-in .synergy-arrow { opacity: 1; } .ecosystem-synergy.animate-in .synergy-arrow-container:nth-child(2) .synergy-arrow { transition-delay: 0.15s; } .ecosystem-synergy.animate-in .synergy-arrow-container:nth-child(4) .synergy-arrow { transition-delay: 0.25s; } .ecosystem-synergy.animate-in .synergy-arrow-container:nth-child(6) .synergy-arrow { transition-delay: 0.35s; } .ecosystem-synergy-container { margin-top: 8rem; padding-top: 2rem; } @media (max-width: 768px) { .ecosystem-synergy-container { margin-top: 2rem; padding-top: 1rem; } .ecosystem-synergy-header { margin-bottom: 1.5rem !important; } } .ecosystem-synergy-header { margin-bottom: 3rem; position: relative; z-index: 1; } .ecosystem-synergy { position: relative; z-index: 1; } .ecosystem-synergy-flow { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0.5rem; position: relative; padding: 2rem 0; width: 100%; max-width: 100%; overflow-x: auto; box-sizing: border-box; } .synergy-node { flex: 0 0 auto; min-width: 140px; max-width: 160px; padding: 1rem; background: linear-gradient(180deg, var(--panel-top), var(--panel-bot)); border: 1px solid var(--line); border-radius: var(--radius-lg); text-align: center; position: relative; z-index: 2; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: var(--shadow-1); will-change: transform; } /* Larger cards on medium screens (but smaller on iPad Pro to prevent overflow) */ @media (min-width: 769px) and (max-width: 1024px) { .synergy-node { min-width: 140px; max-width: 150px; padding: 0.875rem; } } /* Smaller cards on large screens */ @media (min-width: 1025px) { .synergy-node { min-width: 140px; max-width: 160px; padding: 1rem; } } .synergy-node:hover { transform: translateY(-6px) scale(1.05); box-shadow: var(--shadow-2); border-color: var(--dx-emerald); } .synergy-node-icon { font-size: 2.25rem; line-height: 1; margin-bottom: 0.5rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2)); } .synergy-node-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-dim); margin-bottom: 0.375rem; } .synergy-node-title { font-size: 1rem; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 0.375rem; color: var(--text); } .synergy-node-desc { font-size: 0.75rem; color: var(--text-dim); line-height: 1.4; } /* Larger text on medium screens */ @media (min-width: 769px) and (max-width: 1024px) { .synergy-node-icon { font-size: 2.5rem; margin-bottom: 0.625rem; } .synergy-node-label { font-size: 0.7rem; margin-bottom: 0.5rem; } .synergy-node-title { font-size: 1.125rem; margin-bottom: 0.5rem; } .synergy-node-desc { font-size: 0.8125rem; } } /* Platform-specific accent colors */ .synergy-node-stream { border-top: 3px solid var(--dx-cyan); } .synergy-node-stream:hover { box-shadow: var(--shadow-2), 0 0 30px rgba(31,221,254,0.2); } .synergy-node-trade { border-top: 3px solid var(--dx-emerald); } .synergy-node-trade:hover { box-shadow: var(--shadow-2), 0 0 30px rgba(16,185,129,0.2); } .synergy-node-earn { border-top: 3px solid var(--dx-gold); } .synergy-node-earn:hover { box-shadow: var(--shadow-2), 0 0 30px rgba(244,183,62,0.2); } .synergy-node-play { border-top: 3px solid var(--dx-gold); } .synergy-node-play:hover { box-shadow: var(--shadow-2), 0 0 30px rgba(244,183,62,0.2); } .synergy-arrow-container { flex: 0 0 auto; width: 60px; height: 20px; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .synergy-arrow { width: 100%; height: 8px; position: relative; } .synergy-arrow-forward { order: 1; } .synergy-arrow-backward { order: 2; opacity: 0.6; } .synergy-arrow svg { width: 100%; height: 100%; display: block; } .synergy-connection-line { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; z-index: 0; opacity: 0.3; } .synergy-loop-svg { width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: synergyPulse 3s ease-in-out infinite; } @keyframes synergyPulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.6; } } /* Dollar Flow Animation */ .synergy-dollar-flow { position: relative; width: 100%; height: 200px; margin: 2rem 0; overflow: hidden; pointer-events: none; z-index: 1; } .dollar-flow-container { position: relative; width: 100%; height: 100%; } .flowing-dollar { position: absolute; font-size: 1.5rem; font-weight: 800; color: var(--dx-gold); text-shadow: 0 0 10px rgba(244, 183, 62, 0.8), 0 0 20px rgba(244, 183, 62, 0.6), 0 0 30px rgba(244, 183, 62, 0.4); animation: flowUp 5s ease-in-out forwards; z-index: 10; pointer-events: none; transform: translate(-50%, -50%); } @keyframes flowUp { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5) rotate(0deg); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(5deg); } 50% { opacity: 0.9; transform: translate(calc(-50% + var(--end-x, 0px)), calc(-50% + var(--end-y, -150px))) scale(1.2) rotate(-5deg); } 90% { opacity: 0.7; transform: translate(calc(-50% + var(--end-x, 0px)), calc(-50% + var(--end-y, -150px))) scale(1.3) rotate(0deg); } 100% { opacity: 0; transform: translate(calc(-50% + var(--end-x, 0px)), calc(-50% + var(--end-y, -150px))) scale(1.5) rotate(10deg); } } /* Adjust flow height on mobile */ @media (max-width: 768px) { .synergy-dollar-flow { height: 150px; margin: 1.5rem 0; } .flowing-dollar { font-size: 1.25rem; } } .synergy-value-prop { margin-top: 3rem; } .synergy-value-prop .panel { max-width: 600px; margin: 0 auto; } /* iPad Pro and similar tablet sizes - prevent overflow */ @media (min-width: 768px) and (max-width: 1024px) { .ecosystem-synergy-flow { gap: 0.5rem; padding: 1.5rem 1rem; flex-wrap: nowrap; justify-content: center; overflow-x: auto; -webkit-overflow-scrolling: touch; } .synergy-arrow-container { width: 30px; flex-shrink: 0; } .synergy-arrow { width: 100%; transform: rotate(90deg); } .synergy-node { min-width: 130px; max-width: 140px; padding: 0.75rem; flex-shrink: 0; } .synergy-connection-line { display: none; } } @media (max-width: 767px) { .ecosystem-synergy-flow { gap: 1.5rem; } .synergy-arrow { width: 60px; transform: rotate(90deg); } .synergy-node { min-width: 160px; max-width: 180px; } .synergy-connection-line { display: none; } } @media (max-width: 768px) { .ecosystem-synergy-flow { flex-direction: column; gap: 1rem; } .synergy-arrow { width: 20px; height: 40px; transform: rotate(90deg); } .synergy-node { min-width: 100%; max-width: 280px; } .synergy-node-icon { font-size: 2.5rem; } .synergy-node-title { font-size: 1.125rem; } } /* Navbar / Header */ .nav-surface { background: rgba(0,0,0,.30); backdrop-filter: blur(8px); border-color: var(--line); } html.light .nav-surface { background: rgba(255,255,255,.90); } /* Top Header - Landing Page Style (sticky, not fixed) */ .top-header { position: sticky; top: 0; left: 0; right: 0; height: 56px; /* Aligned with Stream Platform */ background: transparent; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; gap: 12px; z-index: 200; /* Aligned with Stream Platform */ backdrop-filter: blur(8px); } .top-header-left { display: flex; align-items: center; gap: 12px; } .top-header-right { display: flex; align-items: center; gap: 12px; } .top-header .brand { display: flex; align-items: center; gap: 10px; } .top-header .brand-logo { height: 28px; width: auto; display: block; transition: opacity 0.2s ease; } .top-header .brand:hover .brand-logo { opacity: 0.85; } html.light .top-header { background: transparent; border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); } /* Modals */ .modal-backdrop { position: fixed; inset:0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px); display:none; align-items:center; justify-content:center; padding: 1rem; z-index: 60; } .modal-backdrop.is-open { display:flex; } .modal-card { background: rgba(20,20,26,.96); border:1px solid var(--line); border-radius: 16px; max-width: 720px; width: 100%; color: #fff; } html.light .modal-card{ background: #fff; color:#0b0b10; } /* Partner logos / marquee */ .partner-logo { height:40px; width:auto; opacity:.9; } .hero-scroll { overflow:hidden; will-change: transform; } /* ============================ 5) SECTIONS ============================ */ .section-mesh { position:relative; } .mesh-emerald { background: linear-gradient(180deg, rgba(16,185,129,.08), transparent 60%); } .mesh-sage { background: linear-gradient(180deg, rgba(56,189,248,.06), transparent 60%); } .mesh-amber { background: linear-gradient(180deg, rgba(244,187,62,.08), transparent 60%); } .mesh-faint { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%); } /* LTE brand accents in hero */ .text-dx-cyan { color: var(--dx-cyan); } .text-dx-emerald { color: var(--dx-emerald); } .text-dx-gold { color: var(--dx-gold); } html.light #hero .text-dx-cyan { color: #02b9ff; } html.light #hero .text-dx-emerald { color: #0faa78; } html.light #hero .text-dx-gold { color: #d19a23; } /* KPI tiles */ .kpi-title{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; color: var(--text-dim); } .kpi-val{ margin-top:.25rem; font-weight:800; font-size:1.35rem; } @media (min-width:768px){ .kpi-val{ font-size:1.6rem; } } .kpi-emerald{ color:var(--dx-emerald); } .kpi-gold{ color:var(--dx-gold); } .kpi-green{ color:var(--dx-emerald); } .kpi-red{ color:#ef4444; } /* Landing page components */ .eyebrow { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); margin-bottom: 0.5rem; } .info-card { transition: transform 0.2s ease, box-shadow 0.2s ease; } .info-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-1); } /* Interface Toggle Buttons */ .interface-toggle-btn { padding: 0.5rem 1.25rem; border-radius: 9999px; border: 1px solid var(--line); background: var(--bg2); color: var(--text-dim); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .interface-toggle-btn:hover { border-color: var(--dx-cyan); color: var(--text); transform: translateY(-1px); } .interface-toggle-btn.active { background: var(--dx-cyan); border-color: var(--dx-cyan); color: white; box-shadow: 0 4px 12px rgba(31, 221, 254, 0.3); } .interface-toggle-btn.active:hover { background: var(--dx-cyan); transform: translateY(-1px); box-shadow: 0 6px 16px rgba(31, 221, 254, 0.4); } /* Light mode: Stream button (inactive) should have white text */ html.light .interface-toggle-btn[data-view="stream"]:not(.active) { color: white; } html.light .interface-toggle-btn[data-view="stream"]:not(.active):hover { color: white; } /* Device Container */ .device-container { position: relative; } .interface-image { transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; } .interface-image.hidden { display: none; } .interface-image img { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .interface-image:hover img { transform: scale(1.02); } /* Click Hint */ .interface-click-hint { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(8px); color: white; padding: 0.5rem 1rem; border-radius: 9999px; font-size: 0.75rem; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; white-space: nowrap; } .device-container:hover .interface-click-hint { opacity: 1; } /* Building Blocks Animation */ .building-block-card { opacity: 1; transform: translateX(0); transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Initial hidden state for inactive views */ .interface-cards-left.hidden .building-block-card, .interface-cards-right.hidden .building-block-card { opacity: 0; transform: translateX(-50px); } .interface-cards-right.hidden .building-block-card { transform: translateX(50px); } .building-block-card[data-delay="0"] { transition-delay: 0.1s; } .building-block-card[data-delay="1"] { transition-delay: 0.2s; } .building-block-card[data-delay="2"] { transition-delay: 0.3s; } .building-block-card[data-delay="3"] { transition-delay: 0.4s; } /* Active state - cards slide in */ .interface-cards-left:not(.hidden) .building-block-card, .interface-cards-right:not(.hidden) .building-block-card { opacity: 1; transform: translateX(0); } /* Image transition */ .interface-image { opacity: 1; transform: scale(1); } .interface-image.switching { opacity: 0; transform: scale(0.95); } /* Hide inactive views */ .interface-cards-left.hidden, .interface-cards-right.hidden { display: none; } @media (max-width: 768px) { .interface-click-hint { display: none; } .interface-toggle-btn { font-size: 0.8125rem; padding: 0.4375rem 1rem; } } /* Hero Section - Premium Brand Styling */ .hero-section { position: relative; min-height: auto; display: flex; align-items: flex-start; justify-content: center; padding-top: 0.5rem; } /* Asymmetric Layout - Slight offset for visual interest */ .hero-content { position: relative; max-width: 100%; } @media (min-width: 768px) { .hero-content { transform: translateX(-2%); max-width: 95%; } } @media (min-width: 1024px) { .hero-content { transform: translateX(-1.5%); max-width: 96%; } } .hero-background { position: absolute; inset: 0; background: /* Primary radial gradient */ radial-gradient( ellipse 120% 100% at 50% 0%, rgba(31, 221, 254, 0.12) 0%, rgba(16, 185, 129, 0.08) 30%, rgba(244, 183, 62, 0.06) 60%, transparent 100% ), /* Secondary mesh overlay for depth */ radial-gradient( circle 800px at 20% 30%, rgba(31, 221, 254, 0.06) 0%, transparent 50% ), radial-gradient( circle 600px at 80% 70%, rgba(16, 185, 129, 0.05) 0%, transparent 50% ), radial-gradient( circle 500px at 50% 50%, rgba(244, 183, 62, 0.04) 0%, transparent 40% ); pointer-events: none; z-index: 1; animation: heroMeshPulse 8s ease-in-out infinite; } /* Visual Anchor - Subtle Diamond Graphic */ .hero-anchor { position: absolute; top: 10%; right: 5%; width: 200px; height: 200px; pointer-events: none; z-index: 2; opacity: 0.4; animation: heroAnchorFloat 6s ease-in-out infinite; } /* Hide on mobile - use multiple methods to ensure it's hidden */ @media (max-width: 767px) { .hero-anchor { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; width: 0 !important; height: 0 !important; overflow: hidden !important; } .hero-anchor * { display: none !important; } } .hero-diamond-graphic { width: 100%; height: 100%; filter: blur(1px); } @keyframes heroAnchorFloat { 0%, 100% { transform: translateY(0) rotate(0deg); opacity: 0.4; } 50% { transform: translateY(-10px) rotate(5deg); opacity: 0.5; } } html.light .hero-background { background: radial-gradient( ellipse 120% 100% at 50% 0%, rgba(31, 221, 254, 0.04) 0%, rgba(16, 185, 129, 0.03) 30%, rgba(244, 183, 62, 0.02) 60%, transparent 100% ), radial-gradient( circle 800px at 20% 30%, rgba(31, 221, 254, 0.02) 0%, transparent 50% ), radial-gradient( circle 600px at 80% 70%, rgba(16, 185, 129, 0.015) 0%, transparent 50% ); animation: heroMeshPulse 8s ease-in-out infinite; } .hero-headline { animation: heroFadeIn 0.8s ease-out; color: var(--text); filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; } .hero-lte { margin-bottom: 1rem; } .hero-letter { position: relative; font-weight: 900; letter-spacing: -0.02em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); transition: transform 0.3s ease, filter 0.3s ease; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); } .hero-letter:hover { transform: translateY(-2px) scale(1.05); text-shadow: 0 4px 8px rgba(0, 0, 0, 0.25); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); } .hero-subheadline { font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; color: var(--text); animation: heroFadeIn 0.8s ease-out 0.2s both; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); word-wrap: break-word; overflow-wrap: break-word; hyphens: auto; } /* Rotating Text Animation */ .rotating-text-wrapper { display: inline-block; position: relative; text-align: center; vertical-align: baseline; margin: 0; /* No extra spacing - flows naturally with sentence */ white-space: nowrap; /* Prevent the wrapper itself from breaking */ } @media (max-width: 767px) { .hero-subheadline { text-align: center; padding: 0 1rem; /* Add padding to prevent edge issues */ line-height: 1.4; /* Slightly more line height for better mobile readability */ } .rotating-text-wrapper { /* Mobile-specific: allow natural width flow while preventing shift */ display: inline-block; vertical-align: baseline; width: auto !important; /* Override JS-set width on mobile */ min-width: fit-content; max-width: 100%; white-space: nowrap; /* Keep words together */ } .rotating-text { /* Ensure text doesn't break awkwardly on mobile */ display: inline-block; white-space: nowrap; } } .rotating-text { display: inline-block; position: relative; color: var(--dx-cyan); font-weight: 700; transition: opacity 0.45s ease, transform 0.45s ease, color 0.45s ease; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); white-space: nowrap; } .hero-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; animation: heroFadeIn 0.8s ease-out 0.4s both; } .hero-btn-primary { transform: scale(1); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; box-shadow: 0 0 0 1px rgba(16,185,129,.28), 0 4px 8px rgba(0, 0, 0, 0.15), 0 12px 24px rgba(16,185,129,.20), 0 40px 80px rgba(16,185,129,.10), 0 0 100px rgba(16,185,129,.15); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); background: linear-gradient(135deg, rgba(16, 185, 129, 1) 0%, rgba(16, 185, 129, 0.95) 50%, rgba(5, 150, 105, 1) 100% ); } .hero-btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 1px rgba(16,185,129,.35), 0 6px 12px rgba(0, 0, 0, 0.2), 0 16px 32px rgba(16,185,129,.25), 0 50px 100px rgba(16,185,129,.15), 0 0 120px rgba(16,185,129,.20); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.15)); } .hero-btn-secondary { transform: scale(1); transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; opacity: 0.9; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08)); } .hero-btn-secondary:hover { transform: translateY(-1px) scale(1.01); opacity: 1; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.1); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.12)); } .tagline { color: var(--text-dim); font-size: 1rem; line-height: 1.75; letter-spacing: -0.01em; animation: heroFadeIn 0.8s ease-out 0.6s both; font-weight: 400; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05); filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.03)); } .hero-trust-indicators { animation: heroFadeIn 0.8s ease-out 0.8s both; border-top: 1px solid var(--line); padding-top: 1.5rem; margin-top: 1.5rem; margin-bottom: 3rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; max-width: 700px; margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .hero-trust-indicators { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; max-width: 900px; } } .trust-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.25rem; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid var(--line); transition: all 0.2s ease; text-align: center; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)); } .trust-item span:first-child { font-size: 1.25rem; font-weight: 700; line-height: 1.2; } .trust-item span:last-child { font-size: 0.875rem; opacity: 0.8; text-transform: uppercase; letter-spacing: 0.05em; } @media (min-width: 768px) { .trust-item { padding: 1.25rem 1.5rem; } .trust-item span:first-child { font-size: 1.5rem; } .trust-item span:last-child { font-size: 0.9375rem; } } .trust-item:hover { background: rgba(255, 255, 255, 0.04); transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 6px 12px rgba(0, 0, 0, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.08); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1)); border-color: var(--line); } html.light .trust-item { background: rgba(0, 0, 0, 0.02); } html.light .trust-item:hover { background: rgba(0, 0, 0, 0.04); } /* Trust Badges */ .hero-trust-badges { animation: heroFadeIn 0.8s ease-out 1s both; margin-bottom: 0.5rem; } .trust-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.375rem 0.75rem; border-radius: 20px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); color: var(--text-dim); font-size: 0.75rem; font-weight: 500; transition: all 0.2s ease; backdrop-filter: blur(4px); } .trust-badge:hover { background: rgba(255, 255, 255, 0.05); border-color: var(--line); transform: translateY(-1px); color: var(--text); } html.light .trust-badge { background: rgba(0, 0, 0, 0.03); border-color: var(--line); } html.light .trust-badge:hover { background: rgba(0, 0, 0, 0.05); } /* Scroll Indicator */ .hero-scroll-indicator { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; z-index: 10; opacity: 0.6; margin: 0.5rem auto 2rem; width: fit-content; animation: heroFadeIn 1s ease-out 1.2s both, scrollIndicatorBounce 2s ease-in-out infinite 2s; cursor: pointer; transition: opacity 0.3s ease; } .hero-scroll-indicator:hover { opacity: 1; } .scroll-mouse { width: 24px; height: 40px; border: 2px solid var(--text-dim); border-radius: 12px; position: relative; display: flex; justify-content: center; padding-top: 8px; } .scroll-wheel { width: 4px; height: 8px; background: var(--text-dim); border-radius: 2px; animation: scrollWheel 1.5s ease-in-out infinite; } .scroll-arrow { font-size: 1.25rem; color: var(--text-dim); animation: scrollArrowBounce 1.5s ease-in-out infinite; } @keyframes scrollWheel { 0%, 100% { opacity: 1; transform: translateY(0); } 50% { opacity: 0.5; transform: translateY(12px); } } @keyframes scrollArrowBounce { 0%, 100% { transform: translateY(0); opacity: 0.6; } 50% { transform: translateY(4px); opacity: 1; } } @keyframes scrollIndicatorBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @media (max-width: 768px) { .hero-scroll-indicator { margin: 0.5rem auto 1.5rem; opacity: 0.5; } .scroll-mouse { width: 20px; height: 32px; } } /* Enhanced Micro-interactions */ .hero-headline, .hero-subheadline, .hero-cta, .tagline { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease; } .hero-headline:active { transform: scale(0.98); } .hero-btn-primary, .hero-btn-secondary { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .hero-btn-primary:active { transform: translateY(0) scale(0.98); } .hero-btn-secondary:active { transform: translateY(0) scale(0.99); } .trust-item { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .trust-item:active { transform: translateY(-1px) scale(0.98); } /* Smooth scroll behavior */ html { scroll-behavior: smooth; } /* Animations */ @keyframes heroFadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes heroMeshPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.95; transform: scale(1.02); } } /* Responsive adjustments */ @media (max-width: 768px) { .hero-section { min-height: 70vh; padding-top: 2rem; padding-bottom: 2rem; } .hero-headline { font-size: 2.5rem; } .hero-trust-indicators { flex-direction: column; gap: 0.75rem; } .trust-item { width: 100%; justify-content: center; } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .hero-headline, .hero-subheadline, .hero-cta, .tagline, .hero-trust-indicators { animation: none; } .hero-letter { animation: none; } } /* Device frames */ .device { position: relative; } .device img { border-radius: 18px; } .device--phone img { border-radius: 30px; } /* Section mesh backgrounds */ .section-mesh { position: relative; } .mesh-emerald { background: linear-gradient(180deg, rgba(16,185,129,.08), transparent 60%); } .mesh-sage { background: linear-gradient(180deg, rgba(56,189,248,.06), transparent 60%); } .mesh-amber { background: linear-gradient(180deg, rgba(244,187,62,.08), transparent 60%); } .mesh-faint { background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 60%); } /* Text gradient */ .text-gradient { background: var(--grad, linear-gradient(135deg, var(--dx-cyan), var(--dx-gold))); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Definition list styling */ dl { margin: 0; } dt { font-weight: 500; margin-bottom: 0.25rem; } dd { margin: 0; } /* Price change badge */ .inline-flex { display: inline-flex; } .border { border: 1px solid var(--line); } .py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; } /* Section padding */ .py-12 { padding-top: 3rem; padding-bottom: 3rem; } /* ============================ 6) FLOATING CONTROLS (DX launcher & updates) ============================ */ /* Mobile FAB (container hidden on desktop via md:hidden in HTML) */ .dx-fab-wrap{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:70; display:grid; gap:.6rem; align-items:end; justify-items:end; } /* Hide FAB on mobile - user requested removal */ @media (max-width: 767px) { .dx-fab-wrap { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } } .dx-fab-main{ width:56px; height:56px; border-radius:999px; display:grid; place-items:center; background:rgba(0,0,0,.7); color:#fff; border:1px solid var(--line); backdrop-filter:blur(6px); cursor:pointer; } html.light .dx-fab-main{ background:rgba(255,255,255,.9); color:#0b0b10; } .dx-fab-petal{ position:absolute; width:44px; height:44px; border-radius:999px; display:grid; place-items:center; color:#0b0b10; border:1px solid rgba(0,0,0,.18); transform: translate3d(0,0,0) scale(.8); opacity:0; pointer-events:none; transition: transform .22s cubic-bezier(.2,.8,.2,1), opacity .22s ease; } .dx-fab-wrap.open .dx-fab-petal{ opacity:1; pointer-events:auto; transform: scale(1); } /* Petal fills + positions */ .dx-fab-petal.petal-l{ background:linear-gradient(180deg,#69d2ff,var(--dx-cyan)); } .dx-fab-petal.petal-t{ background:linear-gradient(180deg,#58e5b9,var(--dx-emerald)); } .dx-fab-petal.petal-e{ background:linear-gradient(180deg,#f7c24a,#d99a0b); } .dx-fab-petal.petal-u{ background:linear-gradient(180deg,#f7c24a,#d99a0b); font-size:18px; } .dx-fab-wrap.open .petal-l{ transform: translate3d(-58px,-8px,0); } .dx-fab-wrap.open .petal-t{ transform: translate3d(-42px,-60px,0); } .dx-fab-wrap.open .petal-e{ transform: translate3d(8px,-58px,0); } .dx-fab-wrap.open .petal-u{ transform: translate3d(58px,-8px,0); } /* Desktop "Get updates" gold pill (visible md+ in HTML) */ .dx-updates-pill-desktop{ position:fixed; right:1.25rem; bottom:1.25rem; z-index:60; height:42px; padding:0 14px; border-radius:999px; display:inline-flex; align-items:center; gap:.5rem; background: linear-gradient(180deg,#f7c24a,#d99a0b); color:#0b0b10; border:1px solid rgba(0,0,0,.22); box-shadow:0 8px 22px rgba(217,154,11,.35); cursor: pointer; } /* CTA diamond (mobile only; hidden on md+) */ .dx-diamond{ width:84px; height:84px; display:block; margin:0 auto 12px; } @media (min-width: 768px){ .dx-diamond { display:none; } } /* ============================ 7) MOBILE / WEBKIT ROBUSTNESS ============================ */ @media (max-width: 640px) { .panel { backdrop-filter: none; } /* iOS clarity */ body { -webkit-text-size-adjust: 100%; } } @supports (-webkit-overflow-scrolling: touch) { body, button, input, textarea { -webkit-text-fill-color: currentColor; } } /* ============================ FIXES — Light mode utilities & components ============================ */ /* A) Force Tailwind "text-white" utilities to flip in Light mode */ html.light .text-white, html.light .text-white\/100, html.light .text-white\/90, html.light .text-white\/80 { color: var(--text) !important; } html.light .text-white\/70, html.light .text-white\/60, html.light .text-white\/50, html.light .text-white\/40, html.light .text-white\/30 { color: var(--text-dim) !important; } /* Also let generic paragraph helpers flip */ html.light .text-muted, html.light .text-dim { color: var(--text-dim) !important; } /* B) Rewards Flow: light-friendly background */ .rewards-box{ background: rgba(0,0,0,.6); /* dark mode default */ border-radius: 20px; } html.light .rewards-box{ background: linear-gradient(180deg, rgba(0,0,0,.035), rgba(0,0,0,.02)); } /* C) Ensure panel text always uses tokens (not inherited white) */ .panel { color: var(--text); } /* D) Make the green "Trade now" glow unmistakable */ .btn-primary{ color:#061a12; background: linear-gradient(180deg,#58e5b9 0%, var(--dx-emerald) 100%); border: 1px solid rgba(0,0,0,.22); box-shadow: 0 0 0 1px rgba(16,185,129,.28), 0 12px 24px rgba(16,185,129,.20), 0 40px 80px rgba(16,185,129,.12), 0 0 80px rgba(16,185,129,.20); /* subtle aura */ transition: transform .15s ease; } .btn-primary:hover{ transform: translateY(-1px); } /* E) DX Fanout — keep petals inside screen at bottom-right */ .dx-fab-wrap.open .petal-l{ transform: translate3d(-58px,-8px,0); } /* left */ .dx-fab-wrap.open .petal-t{ transform: translate3d(-42px,-60px,0); } /* up-left */ .dx-fab-wrap.open .petal-e{ transform: translate3d(8px,-58px,0); } /* up */ .dx-fab-wrap.open .petal-u{ transform: translate3d(-90px,-38px,0); } /* up-left (farther), stays inside */ /* OPTIONAL: Centered launcher (expand from bottom center). To use, add 'dx-fab-center' on the wrapper. */ .dx-fab-center{ right: 50% !important; transform: translateX(50%); } .dx-fab-center.open .petal-l{ transform: translate3d(-76px,-16px,0); } .dx-fab-center.open .petal-t{ transform: translate3d(0,-80px,0); } .dx-fab-center.open .petal-e{ transform: translate3d(76px,-16px,0); } .dx-fab-center.open .petal-u{ transform: translate3d(0,-44px,0); } /* F) Headings contrast in Light mode (hero/section titles sometimes forced white via utilities) */ html.light #hero h1, html.light .section-mesh h2, html.light #token h2 { color: var(--text) !important; } /* Centered mobile launcher (mid-screen) */ .dx-fab-center-mid{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 70; display: grid; gap: .6rem; align-items: center; justify-items: center; pointer-events: auto; } /* Slight pulse on the main 💎 button */ .dx-fab-center-mid .dx-fab-main{ width: 64px; height: 64px; font-size: 26px; animation: dxPulse 2.2s ease-in-out infinite; } @keyframes dxPulse{ 0%,100%{ box-shadow: 0 0 0 0 rgba(16,185,129,.18); } 50% { box-shadow: 0 0 0 16px rgba(16,185,129,0); } } /* Petals start collapsed at center */ .dx-fab-center-mid .dx-fab-petal{ position: absolute; width: 48px; height: 48px; font-weight: 700; transform: translate3d(0,0,0) scale(.85); opacity: 0; pointer-events: none; } /* Fan-out positions when open (cross layout) */ .dx-fab-center-mid.open .petal-t{ transform: translate3d( 0, -92px, 0) scale(1); opacity:1; pointer-events:auto; } /* up */ .dx-fab-center-mid.open .petal-e{ transform: translate3d( 92px, 0, 0) scale(1); opacity:1; pointer-events:auto; } /* right */ .dx-fab-center-mid.open .petal-l{ transform: translate3d(-92px, 0, 0) scale(1); opacity:1; pointer-events:auto; } /* left */ .dx-fab-center-mid.open .petal-u{ transform: translate3d( 0, 92px, 0) scale(1); opacity:1; pointer-events:auto; } /* down */ /* Keep your color fills */ .dx-fab-petal.petal-l{ background:linear-gradient(180deg,#69d2ff,var(--dx-cyan)); color:#0b0b10; } .dx-fab-petal.petal-t{ background:linear-gradient(180deg,#58e5b9,var(--dx-emerald)); color:#0b0b10; } .dx-fab-petal.petal-e{ background:linear-gradient(180deg,#f7c24a,#d99a0b); color:#0b0b10; } .dx-fab-petal.petal-u{ background:linear-gradient(180deg,#f7c24a,#d99a0b); color:#0b0b10; font-size:18px; } /* Respect safe areas on notched phones so the center option isn't hidden by bars (iOS) */ @supports(padding:max(0px)) { .dx-fab-center-mid{ top: calc(50% + max(0px, env(safe-area-inset-bottom) * 0)); } } /* Ensure this launcher is mobile-only; the wrapper is md:hidden in HTML, but belt-and-suspenders: */ @media (min-width:768px){ .dx-fab-center-mid{ display:none !important; } } /* Bottom-center launcher (mobile) — refined spacing */ .dx-fab-bottom { position: fixed; left: 50%; bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 64px)); transform: translateX(-50%); z-index: 70; display: grid; align-items: center; justify-items: center; gap: .6rem; } /* Main 💎 button */ .dx-fab-bottom .dx-fab-main { width: 58px; height: 58px; font-size: 24px; box-shadow: 0 2px 6px rgba(0,0,0,.25), 0 10px 24px rgba(0,0,0,.18); background: rgba(0,0,0,.7); color: #1FDDFE; border: 1px solid var(--line); backdrop-filter: blur(6px); border-radius: 999px; cursor: pointer; } html.light .dx-fab-bottom .dx-fab-main { background: rgba(255,255,255,.9); color: var(--dx-cyan); } /* Petals collapsed by default */ .dx-fab-bottom .dx-fab-petal { position: absolute; width: 46px; height: 46px; font-weight: 700; transform: translate3d(0,0,0) scale(.85); opacity: 0; pointer-events: none; transition: transform .25s cubic-bezier(.22,.8,.32,1), opacity .22s ease; } /* Fan-out: tighter upward semicircle */ .dx-fab-bottom.open .petal-t { transform: translate3d( 0, -82px, 0) scale(1); opacity:1; pointer-events:auto; } /* up */ .dx-fab-bottom.open .petal-l { transform: translate3d(-68px, -46px, 0) scale(1); opacity:1; pointer-events:auto; } /* up-left */ .dx-fab-bottom.open .petal-e { transform: translate3d( 68px, -46px, 0) scale(1); opacity:1; pointer-events:auto; } /* up-right */ .dx-fab-bottom.open .petal-u { transform: translate3d( 0,-122px, 0) scale(1); opacity:1; pointer-events:auto; } /* mailbox above */ /* Petal fills */ .dx-fab-petal.petal-l { background:linear-gradient(180deg,#69d2ff,var(--dx-cyan)); color:#0b0b10; } .dx-fab-petal.petal-t { background:linear-gradient(180deg,#58e5b9,var(--dx-emerald)); color:#0b0b10; } .dx-fab-petal.petal-e { background:linear-gradient(180deg,#f7c24a,#d99a0b); color:#0b0b10; } .dx-fab-petal.petal-u { background:linear-gradient(180deg,#f7c24a,#d99a0b); color:#0b0b10; font-size:18px; } /* Hide on desktop */ @media (min-width:768px){ .dx-fab-bottom{ display:none !important; } } /* --- DX launcher: separate mailbox from T --- */ .dx-fab-bottom .dx-fab-petal.petal-u{ width: 44px; /* a touch smaller than others */ height: 44px; z-index: 2; /* render above T if they ever overlap */ } /* move T a hair down, mailbox farther up */ .dx-fab-bottom.open .petal-t{ transform: translate3d( 0, -78px, 0) scale(1); } .dx-fab-bottom.open .petal-u{ transform: translate3d( 0,-136px, 0) scale(1); } /* keep the left/right petals as-is (for reference) .dx-fab-bottom.open .petal-l{ transform: translate3d(-68px, -46px, 0) scale(1); } .dx-fab-bottom.open .petal-e{ transform: translate3d( 68px, -46px, 0) scale(1); } */ /* Robust, seamless marquee (infinite loop + pause on hover) */ .partners-carousel { padding-bottom: 0; } /* Carousel spacing - borders hug the logos */ .partners-carousel.section-divider { margin-top: 0; padding-top: 0.5rem; padding-bottom: 0.5rem; } @media (min-width: 768px) { .partners-carousel.section-divider { padding-top: 0.75rem; padding-bottom: 0.75rem; } } .partners-carousel .partner-logo{height:40px;width:auto;opacity:.9} .partners-carousel .marquee{position:relative;overflow:hidden} .partners-carousel .track{ display:flex; align-items:center; gap:48px; will-change: transform; animation: dx-scroll 28s linear infinite; width:max-content; padding-block:0.5rem; } .partners-carousel .marquee:hover .track{ animation-play-state: paused; } .partners-carousel .track.clone{ margin-left:48px; } @keyframes dx-scroll { to { transform: translateX(-50%); } } /* Light/dark friendliness - only invert specific black logos in dark mode */ .partners-carousel .partner-logo { opacity: 0.9; transition: filter 0.3s ease, opacity 0.3s ease; } /* Only invert Ethereum, Solana, and Dexscreener logos in dark mode */ html:not(.light) .partners-carousel .partner-logo[data-invert-dark] { filter: invert(1) brightness(1.1); opacity: 0.85; } /* Light mode - no filters */ html.light .partners-carousel .partner-logo { filter: none; opacity: 0.9; }