/* Landing — scoped to .az-landing. Safe to load globally; styles never leak. Forces dark theme regardless of system prefers-color-scheme — the marketing surface is black+gold identity only. Product pages still respect system theme. */ .az-landing { /* Dark-theme tokens hardcoded — overrides any :root light-theme values */ --az-surface-900: #000000; --az-surface-800: #0A0A0A; --az-surface-700: #141414; --az-text-primary: #F5F5F5; --az-text-muted: #A0A0A0; --az-gold: #FFD700; --az-gold-rgb: 255, 215, 0; --az-gold-gradient: linear-gradient(135deg, #BF953F 0%, #D4AF00 20%, #FFD700 40%, #D4AF00 60%, #BF953F 80%, #AA771C 100%); color-scheme: dark; min-height: 100vh; background: #000; color: #F5F5F5; font-family: 'Manrope', system-ui, -apple-system, sans-serif; overflow-x: hidden; position: relative; } /* Page scrollbar — match the dark + gold theme. Applied on so it covers the entire landing surface (Chromium / Safari / Edge via the ::-webkit-scrollbar pseudo, Firefox via the scrollbar-* properties). */ html:has(.az-landing) { scrollbar-color: rgba(255, 215, 0, 0.35) #0a0a0a; scrollbar-width: thin; } html:has(.az-landing)::-webkit-scrollbar { width: 10px; height: 10px; } html:has(.az-landing)::-webkit-scrollbar-track { background: #0a0a0a; } html:has(.az-landing)::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(255, 215, 0, 0.38) 0%, rgba(170, 119, 28, 0.38) 100%); border: 2px solid #0a0a0a; border-radius: 999px; } html:has(.az-landing)::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, rgba(255, 215, 0, 0.65) 0%, rgba(170, 119, 28, 0.65) 100%); } html:has(.az-landing)::-webkit-scrollbar-corner { background: #0a0a0a; } /* Ambient gold glow behind page — subtle, never distracting. Skipped in the hero because the baked video already carries its own lighting. */ .az-landing::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse 40% 30% at 15% 85%, rgba(var(--az-gold-rgb, 255, 215, 0), 0.04), transparent 70%); z-index: 0; } .az-landing > * { position: relative; z-index: 1; } /* ─── Hero (baked webm + typography) ─── */ .az-landing-hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; } .az-hero-video { position: absolute; top: 15%; right: 0; bottom: auto; left: auto; width: 60%; height: 70%; display: block; object-fit: cover; z-index: 1; pointer-events: none; /* cursor parallax driven by JS setting --parallax-x / --parallax-y on .az-landing-hero */ transform: translate3d( calc(var(--parallax-x, 0) * 16px), calc(var(--parallax-y, 0) * 12px), 0 ); transition: transform 400ms cubic-bezier(.2,.6,.2,1); /* slight scale so edges don't reveal during parallax */ scale: 1.04; } /* Soft feather on the video's left edge so it fades into the copy area. */ .az-hero-vignette { position: absolute; top: 0; right: 0; bottom: 0; left: 35%; width: 30%; pointer-events: none; z-index: 2; background: linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.7) 25%, rgba(0, 0, 0, 0.3) 55%, transparent 100%); } .az-landing-hero-inner { position: relative; z-index: 3; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(24px, 6vw, 96px); gap: var(--az-space-6, 24px); max-width: 48%; } .az-hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 215, 0, 0.75); font-weight: 600; opacity: 0; animation: az-hero-eyebrow-in 900ms cubic-bezier(.2,.6,.2,1) 200ms forwards; } .az-hero-eyebrow::before { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, var(--az-gold, #FFD700)); } @keyframes az-hero-eyebrow-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } } .az-landing-hero h1 { font-size: clamp(56px, 8.5vw, 132px); font-weight: 800; line-height: 0.92; letter-spacing: -0.045em; margin: 0; color: #FFF8D6; /* perspective for the char reveal's rotateX */ perspective: 800px; } .az-hero-line { display: block; overflow: hidden; padding-bottom: 0.06em; } /* Per-character wrapper inserted by splitChars() — each span carries its own text-gradient so the luxe look survives the split without the background-clip-on-parent-with-inline-block-children trap. */ .az-landing-hero h1 .az-char { display: inline-block; will-change: transform, opacity; transform-origin: 50% 100%; background: linear-gradient(180deg, #FFF8D6 0%, #FFD700 50%, #AA771C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* initial invisible state for GSAP reveal — only applies when JS is enabled (html.az-js is set by an inline script in ). Without .az-js, content stays visible for no-JS / script-failure fallback. H1 gets visibility:hidden (not opacity 0) so splitChars can measure layout without the char spans flashing in solid white before GSAP paints them with the gradient fill. JS removes the visibility guard once chars are wired. */ .az-js .az-landing-hero h1 { visibility: hidden; } .az-js .az-landing-hero-inner > p, .az-js .az-landing-hero-inner .az-landing-cta > *, .az-js .az-landing-hero-inner .az-landing-scroll-hint { opacity: 0; } .az-landing-hero > .az-landing-hero-inner > p { font-size: clamp(16px, 1.6vw, 22px); font-weight: 400; color: #C8C8C8; max-width: 52ch; margin: 0; line-height: 1.45; } /* ─── CTAs ─── */ .az-landing-cta { display: flex; gap: var(--az-space-4, 16px); flex-wrap: wrap; margin-top: var(--az-space-4, 16px); } .az-landing .btn-primary, .az-landing .btn-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 12px; font-family: inherit; font-weight: 600; font-size: 15px; letter-spacing: 0.01em; text-decoration: none; cursor: pointer; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease, background 200ms ease; } .az-landing .btn-primary { background: var(--az-gold-gradient); color: #0A0A0A; border: none; box-shadow: 0 4px 16px rgba(var(--az-gold-rgb, 255, 215, 0), 0.2); } .az-landing .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(var(--az-gold-rgb, 255, 215, 0), 0.35); } .az-landing .btn-secondary { background: transparent; color: var(--az-gold, #FFD700); border: 1px solid rgba(var(--az-gold-rgb, 255, 215, 0), 0.35); } .az-landing .btn-secondary:hover { border-color: var(--az-gold, #FFD700); background: rgba(var(--az-gold-rgb, 255, 215, 0), 0.06); } .az-landing .btn-primary:focus-visible, .az-landing .btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--az-gold-rgb, 255, 215, 0), 0.35); } /* ─── Scroll hint ─── */ .az-landing-scroll-hint { position: absolute; left: 50%; bottom: max(env(safe-area-inset-bottom, 24px), 32px); transform: translateX(-50%); display: inline-flex; flex-direction: column; align-items: center; gap: 10px; font-size: 10px; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255, 215, 0, 0.7); font-weight: 600; z-index: 4; pointer-events: none; } .az-landing-scroll-hint-line { width: 1px; height: 32px; background: rgba(255, 215, 0, 0.18); position: relative; overflow: hidden; } .az-landing-scroll-hint-line::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 45%; background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.95)); animation: az-scroll-hint-flow 1.8s ease-in-out infinite; } @keyframes az-scroll-hint-flow { 0% { transform: translateY(-100%); } 100% { transform: translateY(220%); } } /* ─── Glava (generic) ─── */ .az-glava { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(32px, 6vw, 96px); border-top: 1px solid rgba(255, 215, 0, 0.06); } .az-glava-content { display: flex; flex-direction: column; gap: 20px; max-width: 560px; } .az-glava-index { font-size: 12px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255, 215, 0, 0.6); font-weight: 600; } .az-glava h2 { font-size: clamp(36px, 5.5vw, 80px); font-weight: 800; line-height: 1; letter-spacing: -0.03em; margin: 0; color: #F5F5F5; } .az-glava-accent { background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .az-glava-content > p { font-size: clamp(15px, 1.2vw, 18px); color: #A0A0A0; line-height: 1.55; margin: 0; max-width: 48ch; } .az-glava-content .btn-secondary { align-self: flex-start; margin-top: 16px; } /* ─── Chain list ─── */ .az-chain-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; } .az-chain-list li { font-size: 13px; font-weight: 500; padding: 6px 12px; border: 1px solid rgba(255, 215, 0, 0.18); border-radius: 999px; color: #D4AF00; background: rgba(255, 215, 0, 0.04); } /* ─── Orbit visual (glava 1) ─── */ .az-glava-visual { container-type: inline-size; position: relative; aspect-ratio: 1; width: 100%; max-width: 560px; justify-self: center; } /* Static dashed rings — decorative orbital hint */ .az-orbit-rings { position: absolute; inset: 0; pointer-events: none; } .az-orbit-ring { position: absolute; top: 50%; left: 50%; border: 1px dashed rgba(255, 215, 0, 0.12); border-radius: 50%; transform: translate(-50%, -50%); aspect-ratio: 1; } .az-orbit-ring-1 { width: 34cqi; } .az-orbit-ring-2 { width: 50cqi; } .az-orbit-ring-3 { width: 66cqi; } .az-orbit-ring-4 { width: 82cqi; } .az-orbit-ring-5 { width: 98cqi; } /* Center — brand logo. Sized so the full emblem + "azamind · increase assets" wordmark fits comfortably inside the circle with the text readable. */ .az-orbit-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 20cqi; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #1A1A1A 0%, #0A0A0A 70%, #000 100%); border: 1px solid rgba(255, 215, 0, 0.28); box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.06), 0 0 80px rgba(255, 215, 0, 0.18), inset 0 0 40px rgba(0, 0, 0, 0.8); display: flex; align-items: center; justify-content: center; z-index: 3; padding: 1.2cqi; } .az-orbit-center-logo { /* Square img inscribed in the circular container: side = diameter / √2 (~70%) so the emblem's corners sit inside the circle, not spilling over its edge. */ width: 70%; height: 70%; object-fit: contain; pointer-events: none; filter: drop-shadow(0 0 14px rgba(255, 215, 0, 0.25)); } .az-pulse { width: 6px; height: 6px; border-radius: 50%; background: #4CAF50; box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); animation: az-pulse 2s ease-out infinite; } @keyframes az-pulse { 0% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.7); } 70% { box-shadow: 0 0 0 10px rgba(76, 175, 80, 0); } 100% { box-shadow: 0 0 0 0 rgba(76, 175, 80, 0); } } /* Orbit groups (rotating badge containers) */ .az-orbit-group { position: absolute; inset: 0; pointer-events: none; animation: az-orbit-spin 60s linear infinite; } /* Odd rings rotate reverse, even rings forward — staggered feel */ .az-orbit-group-1 { animation-duration: 52s; animation-direction: reverse; } .az-orbit-group-2 { animation-duration: 72s; } .az-orbit-group-3 { animation-duration: 92s; animation-direction: reverse; } .az-orbit-group-4 { animation-duration: 116s; } .az-orbit-group-5 { animation-duration: 140s; animation-direction: reverse; } @keyframes az-orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Chain badges — uniform size across all five orbits; only radius differs. Shrunk ~2x from the original (10cqi -> 5cqi) so rings are legible but give visual priority to the brand logo at the center. */ .az-chain-badge { --angle: 0deg; --radius: 20cqi; position: absolute; top: 50%; left: 50%; width: 5cqi; height: 5cqi; min-width: 24px; min-height: 24px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #1A1A1A, #0A0A0A); border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 0 10px rgba(255, 215, 0, 0.1), 0 3px 10px rgba(0, 0, 0, 0.6); display: flex; align-items: center; justify-content: center; padding: 0.6cqi; transform: translate(-50%, -50%) translate( calc(var(--radius) * cos(var(--angle))), calc(var(--radius) * sin(var(--angle))) ); /* counter-spin so logo stays upright while orbit rotates */ animation: az-orbit-counterspin 60s linear infinite; transition: transform 200ms ease, box-shadow 200ms ease; } .az-chain-badge img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* Radii: 5 well-separated rings, inner clearly outside the 22cqi-wide center. Badges duplicate parent duration; direction inverted so badge logo stays upright. */ .az-orbit-group-1 .az-chain-badge { --radius: 19cqi; animation-duration: 52s; animation-name: az-orbit-counterspin-reverse; } .az-orbit-group-2 .az-chain-badge { --radius: 27cqi; animation-duration: 72s; } .az-orbit-group-3 .az-chain-badge { --radius: 35cqi; animation-duration: 92s; animation-name: az-orbit-counterspin-reverse; } .az-orbit-group-4 .az-chain-badge { --radius: 43cqi; animation-duration: 116s; } .az-orbit-group-5 .az-chain-badge { --radius: 51cqi; animation-duration: 140s; animation-name: az-orbit-counterspin-reverse; } @keyframes az-orbit-counterspin { from { transform: translate(-50%, -50%) translate(calc(var(--radius) * cos(var(--angle))), calc(var(--radius) * sin(var(--angle)))) rotate(0deg); } to { transform: translate(-50%, -50%) translate(calc(var(--radius) * cos(var(--angle))), calc(var(--radius) * sin(var(--angle)))) rotate(-360deg); } } @keyframes az-orbit-counterspin-reverse { from { transform: translate(-50%, -50%) translate(calc(var(--radius) * cos(var(--angle))), calc(var(--radius) * sin(var(--angle)))) rotate(0deg); } to { transform: translate(-50%, -50%) translate(calc(var(--radius) * cos(var(--angle))), calc(var(--radius) * sin(var(--angle)))) rotate(360deg); } } /* ─── Reduced motion — freeze orbits ─── */ @media (prefers-reduced-motion: reduce) { .az-orbit-group, .az-chain-badge, .az-pulse { animation: none; } } /* ─── Glava 2 (Lending) ─── */ .az-glava-visual-lending { display: flex; flex-direction: column; gap: 12px; aspect-ratio: auto; width: 100%; max-width: 520px; } .az-protocol-card { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; background: linear-gradient(180deg, rgba(12, 12, 12, 0.96) 0%, rgba(4, 4, 4, 0.96) 100%); border: 1px solid rgba(255, 215, 0, 0.08); border-radius: 14px; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .az-protocol-card:hover { transform: translateX(-2px); border-color: rgba(255, 215, 0, 0.22); background: linear-gradient(180deg, rgba(18, 18, 18, 0.97) 0%, rgba(8, 8, 8, 0.97) 100%); } .az-protocol-card-featured { border-color: rgba(255, 215, 0, 0.24); box-shadow: 0 0 32px rgba(255, 215, 0, 0.08); } .az-protocol-head { display: flex; align-items: center; gap: 12px; } .az-protocol-mark { position: relative; width: 42px; height: 42px; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, 0.5); overflow: visible; } .az-protocol-mark > img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; border-radius: 50%; background: rgba(255, 255, 255, 0.02); } /* Tiny chain logo overlay anchored bottom-right of the protocol mark. */ .az-protocol-chain-badge { position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px; border-radius: 999px; background: #0a0a0a; border: 2px solid #0a0a0a; display: grid; place-items: center; overflow: hidden; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); } .az-protocol-chain-badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .az-protocol-meta { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .az-protocol-name { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 700; color: #F5F5F5; letter-spacing: -0.01em; line-height: 1; } /* Tiny live pulse dot next to protocol name. */ .az-protocol-live { width: 6px; height: 6px; border-radius: 999px; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); animation: rwa-live-pulse 1.8s ease-in-out infinite; flex-shrink: 0; } .az-protocol-sub { font-size: 11px; color: #808080; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } /* Summary strip — protocols / net worth / avg HF aggregate. */ .az-lending-summary { display: flex; align-items: stretch; justify-content: space-between; gap: 12px; padding: 14px 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(18, 16, 6, 0.96) 0%, rgba(8, 7, 2, 0.96) 100%); border: 1px solid rgba(255, 215, 0, 0.12); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); margin-bottom: 4px; } .az-lending-summary-stat { display: flex; flex-direction: column; gap: 2px; flex: 1; text-align: center; } .az-lending-summary-stat:first-child { text-align: left; } .az-lending-summary-stat:last-child { text-align: right; } .az-lending-summary-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #808080; font-weight: 700; } .az-lending-summary-value { font-size: 20px; font-weight: 800; color: #F5F5F5; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .az-lending-summary-gold { background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .az-lending-summary-safe { color: #4ade80; } .az-lending-summary-sep { width: 1px; background: linear-gradient(180deg, transparent, rgba(255, 215, 0, 0.12), transparent); align-self: stretch; } /* Per-card stat row — supplied / apy two-column. */ .az-protocol-stats { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 6px; } .az-protocol-stat { display: flex; flex-direction: column; gap: 2px; } .az-protocol-stat-apy { text-align: right; align-items: flex-end; } .az-protocol-stat-label { font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: #707070; font-weight: 700; } .az-protocol-stat-value { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; color: #F5F5F5; letter-spacing: -0.02em; line-height: 1; } .az-protocol-stat-up { color: #4ade80; } .az-protocol-stat-down { color: #EF6864; } /* Supply / borrow split bar — green/red proportion. */ .az-protocol-split { display: flex; height: 4px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.05); margin-top: 2px; } .az-protocol-split-supply { background: linear-gradient(90deg, rgba(74, 222, 128, 0.55), rgba(74, 222, 128, 0.85)); box-shadow: 0 0 8px rgba(74, 222, 128, 0.4); } .az-protocol-split-borrow { background: linear-gradient(90deg, rgba(239, 68, 68, 0.65), rgba(239, 68, 68, 0.95)); } .az-protocol-hf { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; white-space: nowrap; } .az-hf-safe { background: rgba(76, 175, 80, 0.12); border: 1px solid rgba(76, 175, 80, 0.3); color: #7FD584; } .az-hf-warning { background: rgba(200, 164, 21, 0.14); border: 1px solid rgba(200, 164, 21, 0.35); color: #E0BE3A; } .az-hf-danger { background: rgba(229, 57, 53, 0.14); border: 1px solid rgba(229, 57, 53, 0.35); color: #EF6864; animation: az-hf-pulse 2.4s ease-in-out infinite; } @keyframes az-hf-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229, 57, 53, 0); } 50% { box-shadow: 0 0 0 6px rgba(229, 57, 53, 0.08); } } .az-bar { position: relative; height: 4px; background: rgba(255, 255, 255, 0.06); border-radius: 2px; overflow: hidden; } .az-bar-fill { position: absolute; top: 0; left: 0; bottom: 0; border-radius: 2px; transition: width 600ms ease; } .az-bar-fill-safe { background: linear-gradient(90deg, #4CAF50, #7FD584); } .az-bar-fill-warning { background: linear-gradient(90deg, #C8A415, #E0BE3A); } .az-bar-fill-danger { background: linear-gradient(90deg, #E53935, #EF6864); } /* ─── Glava 3 (RWA — Real World Assets) ─── */ .az-glava-visual-xstocks { aspect-ratio: auto; width: 100%; max-width: 580px; display: flex; flex-direction: column; gap: 12px; } .az-rwa-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .az-rwa-card { position: relative; padding: 18px 18px 14px; background: linear-gradient(180deg, rgba(22, 22, 22, 0.92) 0%, rgba(10, 10, 10, 0.92) 100%); border: 1px solid rgba(255, 215, 0, 0.08); border-radius: 16px; display: flex; flex-direction: column; gap: 14px; transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease; overflow: hidden; box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35); } .az-rwa-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle 140px at 80% -20%, rgba(255, 215, 0, 0.05), transparent 70%); } .az-rwa-card:hover { transform: translateY(-3px); border-color: rgba(255, 215, 0, 0.22); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.5); } .az-rwa-featured { border-color: rgba(255, 215, 0, 0.35); background: linear-gradient(180deg, rgba(34, 26, 8, 0.85) 0%, rgba(14, 11, 4, 0.92) 100%); box-shadow: 0 0 0 1px rgba(255, 215, 0, 0.16) inset, 0 14px 40px rgba(255, 215, 0, 0.08); } .az-rwa-featured::before { background: radial-gradient(circle 200px at 50% -20%, rgba(255, 215, 0, 0.14), transparent 70%); } /* Live dot — top-right pulse */ .az-rwa-live { position: absolute; top: 14px; right: 14px; width: 7px; height: 7px; border-radius: 999px; background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); animation: rwa-live-pulse 1.8s ease-in-out infinite; z-index: 2; } .az-rwa-featured .az-rwa-live { background: #FFD700; box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22); } @keyframes rwa-live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } .az-rwa-head { display: flex; align-items: center; gap: 11px; padding-right: 18px; } .az-rwa-badge { width: 40px; height: 40px; flex-shrink: 0; display: grid; place-items: center; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); overflow: hidden; } .az-rwa-badge img, .az-rwa-badge svg { width: 60%; height: 60%; display: block; object-fit: contain; } /* Brand silhouettes (Apple/Tesla) breathe inside their badge so the leaf or the spoiler doesn't crowd the rounded corners — pull them down to 50% of the badge so there's a visible margin. */ .az-rwa-badge-aapl img, .az-rwa-badge-tsla img, .az-rwa-badge-nvda img { width: 52%; height: 52%; } .az-rwa-badge-aapl { background: linear-gradient(135deg, #1f1f1f, #050505); border-color: rgba(255, 255, 255, 0.12); } .az-rwa-badge-nvda { background: linear-gradient(135deg, #0f1a0a, #050805); border-color: rgba(118, 185, 0, 0.25); } .az-rwa-badge-tsla { background: linear-gradient(135deg, #1f0808, #0a0303); border-color: rgba(227, 25, 55, 0.35); } .az-rwa-badge-spy, .az-rwa-badge-treasury, .az-rwa-badge-gold { background: linear-gradient(135deg, rgba(255, 215, 0, 0.10), rgba(170, 119, 28, 0.04)); border-color: rgba(255, 215, 0, 0.22); } .az-rwa-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; } .az-rwa-ticker { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; color: #F5F5F5; text-transform: uppercase; line-height: 1; } .az-rwa-issuer { font-size: 10px; color: #808080; letter-spacing: 0.04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .az-rwa-price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .az-rwa-price { font-size: clamp(22px, 2vw, 28px); font-weight: 800; color: #F5F5F5; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1; } .az-rwa-cents { font-size: 0.55em; opacity: 0.55; font-weight: 700; margin-left: 1px; } .az-rwa-price-gold { background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } .az-rwa-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 4px 9px; border-radius: 999px; line-height: 1; } .az-rwa-delta svg { display: block; } .az-rwa-delta-up { color: #4ade80; background: rgba(74, 222, 128, 0.10); border: 1px solid rgba(74, 222, 128, 0.22); } .az-rwa-delta-down { color: #ef4444; background: rgba(239, 68, 68, 0.10); border: 1px solid rgba(239, 68, 68, 0.22); } .az-rwa-delta-flat { color: #A0A0A0; background: rgba(160, 160, 160, 0.08); border: 1px solid rgba(160, 160, 160, 0.16); text-transform: uppercase; letter-spacing: 0.08em; font-size: 9px; } .az-rwa-spark { width: 100%; height: 56px; display: block; margin-top: -4px; } .az-rwa-meta { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: #808080; font-weight: 600; } .az-rwa-meta-vol { color: #A0A0A0; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .az-rwa-footer { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: #A0A0A0; background: rgba(20, 20, 20, 0.85); border: 1px solid rgba(255, 215, 0, 0.10); border-radius: 999px; align-self: flex-end; font-weight: 600; } /* ─── Glava 4 (Risk) ─── */ .az-glava-visual-risk { aspect-ratio: auto; width: 100%; max-width: 520px; display: flex; flex-direction: column; gap: 14px; } .az-risk-meter { padding: 18px; background: linear-gradient(180deg, rgba(12, 12, 12, 0.96) 0%, rgba(4, 4, 4, 0.96) 100%); border: 1px solid rgba(255, 215, 0, 0.1); border-radius: 14px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .az-risk-meter-head { display: flex; align-items: baseline; justify-content: space-between; } .az-risk-meter-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #A0A0A0; font-weight: 600; } .az-risk-meter-value { font-size: 26px; font-weight: 800; color: #F5F5F5; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .az-risk-meter-unit { font-size: 0.55em; font-weight: 600; color: #808080; margin-left: 2px; } .az-risk-meter-scale { position: relative; display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 0; height: 8px; border-radius: 999px; overflow: hidden; } .az-risk-zone { display: block; height: 100%; } .az-risk-zone-danger { background: linear-gradient(90deg, #E53935, #F15450); } .az-risk-zone-warning { background: linear-gradient(90deg, #E0BE3A, #C8A415); } .az-risk-zone-safe { background: linear-gradient(90deg, #4CAF50, #7FD584); } .az-risk-marker { position: absolute; top: -6px; width: 2px; height: 20px; background: #F5F5F5; box-shadow: 0 0 12px rgba(245, 245, 245, 0.8); transform: translateX(-50%); animation: az-risk-marker-pulse 2.4s ease-in-out infinite; } @keyframes az-risk-marker-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .az-risk-meter-legend { display: grid; grid-template-columns: 1fr 1fr 2fr; font-size: 10px; color: #808080; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; } .az-risk-card { padding: 16px 18px; background: linear-gradient(180deg, rgba(12, 12, 12, 0.96) 0%, rgba(4, 4, 4, 0.96) 100%); border: 1px solid rgba(255, 215, 0, 0.08); border-radius: 14px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4); } .az-risk-meter-card { gap: 14px; } /* Status pill — top-right of health meter card */ .az-risk-status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; flex-shrink: 0; } .az-risk-status-safe { color: #4ade80; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.30); } .az-risk-status-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); animation: rwa-live-pulse 1.8s ease-in-out infinite; } /* Arc gauge row — arc on the left, 24h sparkline on the right */ .az-risk-arc-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; align-items: center; } .az-risk-arc-wrap { position: relative; } .az-risk-arc { width: 100%; height: auto; max-height: 140px; display: block; } .az-risk-arc-score { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; pointer-events: none; line-height: 1; } .az-risk-arc-value { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; text-shadow: 0 0 26px rgba(255, 215, 0, 0.22); } .az-risk-arc-unit { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #707070; margin-top: 4px; font-weight: 600; } .az-risk-trend { width: 100%; height: auto; max-height: 60px; display: block; align-self: end; } /* Liquidation cliff diagram */ .az-risk-liq-stack { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .az-risk-cliff { margin-top: 4px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; gap: 8px; } .az-risk-cliff-track { position: relative; display: block; height: 6px; border-radius: 999px; background: linear-gradient(90deg, rgba(239, 68, 68, 0.5) 0%, rgba(224, 190, 58, 0.45) 40%, rgba(74, 222, 128, 0.4) 100%); overflow: visible; } .az-risk-cliff-zone-danger, .az-risk-cliff-zone-buffer { display: none; } .az-risk-cliff-marker { position: absolute; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; border-radius: 999px; background: #0a0a0a; border: 2px solid #ef4444; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18); z-index: 2; } .az-risk-cliff-marker i { position: absolute; inset: 2px; border-radius: 999px; background: #ef4444; } .az-risk-cliff-marker-price { border-color: var(--az-gold, #FFD700); box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.22); animation: rwa-live-pulse 1.8s ease-in-out infinite; } .az-risk-cliff-marker-price i { background: var(--az-gold, #FFD700); } .az-risk-cliff-labels { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; font-variant-numeric: tabular-nums; } .az-risk-cliff-label-liq, .az-risk-cliff-label-current { display: flex; flex-direction: column; gap: 2px; font-size: 10px; } .az-risk-cliff-label-liq em, .az-risk-cliff-label-current em { font-style: normal; text-transform: uppercase; letter-spacing: 0.12em; color: #707070; font-weight: 600; } .az-risk-cliff-label-liq b { color: #ef4444; font-size: 14px; font-weight: 700; } .az-risk-cliff-label-current { text-align: right; } .az-risk-cliff-label-current b { color: var(--az-gold, #FFD700); font-size: 14px; font-weight: 700; } /* Exposure card — head with total */ .az-risk-exposure-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; } .az-risk-exposure-head > div:first-child { display: flex; flex-direction: column; gap: 3px; } .az-risk-exposure-total { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; } .az-risk-exposure-total-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: #707070; font-weight: 700; } .az-risk-exposure-total-value { font-size: 16px; font-weight: 800; background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } /* Stress-test card — before / arrow / after layout */ .az-risk-card-tag-warning { color: #E0BE3A; background: rgba(224, 190, 58, 0.12); border-color: rgba(224, 190, 58, 0.30); } .az-risk-stress { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; padding: 6px 0; } .az-risk-stress-col { display: flex; flex-direction: column; gap: 4px; } .az-risk-stress-col-after { align-items: flex-end; } .az-risk-stress-arrow { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #EF6864; } .az-risk-stress-arrow svg { width: 32px; height: 16px; } .az-risk-stress-arrow-label { font-size: 11px; font-weight: 700; color: #EF6864; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .az-risk-stress-value-danger { color: #EF6864; } .az-risk-stress-vaults { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .az-risk-stress-vaults-label { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #808080; font-weight: 700; margin-right: 2px; } .az-risk-stress-vault { font-size: 10px; font-weight: 700; padding: 4px 9px; border-radius: 999px; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } .az-risk-stress-vault-fluid { color: #E0BE3A; background: rgba(224, 190, 58, 0.10); border: 1px solid rgba(224, 190, 58, 0.30); } .az-risk-stress-vault-kamino { color: #EF6864; background: rgba(239, 104, 100, 0.10); border: 1px solid rgba(239, 104, 100, 0.30); } .az-risk-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .az-risk-card-tag { font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--az-gold, #FFD700); padding: 3px 8px; border-radius: 999px; background: rgba(255, 215, 0, 0.08); border: 1px solid rgba(255, 215, 0, 0.2); } .az-risk-card-label { font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #A0A0A0; font-weight: 600; } .az-risk-card-value { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1; } .az-risk-card-value-safe { color: #7FD584; } .az-risk-card-value-warning { color: #E0BE3A; } .az-risk-card-value-danger { color: #EF6864; } .az-risk-liq-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .az-risk-liq-row > div:first-child { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; } .az-risk-hf-mini { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; } .az-risk-hf-mini-label { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #707070; font-weight: 700; } .az-risk-hf-mini-value { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; padding: 6px 12px; border-radius: 10px; } .az-risk-stress-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .az-risk-stress-row > div { display: flex; flex-direction: column; gap: 2px; } .az-risk-stress-label { font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: #808080; font-weight: 600; } .az-risk-stress-value { font-size: 20px; font-weight: 700; color: #F5F5F5; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .az-risk-stress-delta { font-size: 11px; font-weight: 600; color: #EF6864; letter-spacing: 0.02em; } .az-risk-stress-delta-warn { color: #E0BE3A; } .az-risk-meter-card { gap: 10px; } .az-risk-meter-card .az-risk-meter-head > div { display: flex; flex-direction: column; gap: 3px; } .az-risk-card-hint { font-size: 12px; color: #808080; line-height: 1.4; } .az-risk-exposure { display: flex; flex-direction: column; gap: 8px; } .az-risk-exposure-row { display: grid; grid-template-columns: 110px 1fr 44px; align-items: center; gap: 10px; font-size: 12px; } .az-risk-exposure-name { display: inline-flex; align-items: center; gap: 8px; color: #D0D0D0; font-weight: 500; } .az-risk-exposure-name img { width: 16px; height: 16px; border-radius: 4px; flex-shrink: 0; } .az-risk-exposure-bar { position: relative; height: 6px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; overflow: hidden; } .az-risk-exposure-bar > span { position: absolute; top: 0; left: 0; bottom: 0; background: var(--az-gold-gradient); border-radius: 999px; box-shadow: 0 0 12px rgba(255, 215, 0, 0.35); } .az-risk-exposure-pct { text-align: right; color: var(--az-gold, #FFD700); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 15px; letter-spacing: -0.01em; } .az-risk-exposure-pct small { font-size: 0.6em; margin-left: 1px; opacity: 0.7; } /* ─── Scroll progress bar ─── */ .az-scroll-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: var(--az-gold-gradient); transform: scaleX(0); transform-origin: 0 50%; z-index: 100; pointer-events: none; box-shadow: 0 0 12px rgba(255, 215, 0, 0.5); } /* ─── Detail reveal ─── */ .az-detail-reveal { padding: clamp(64px, 10vw, 140px) clamp(24px, 6vw, 96px); border-top: 1px solid rgba(255, 215, 0, 0.06); } .az-detail-reveal-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 56px; } .az-detail-reveal h2 { font-size: clamp(36px, 5vw, 72px); font-weight: 800; line-height: 0.98; letter-spacing: -0.03em; margin: 0; color: #F5F5F5; max-width: 20ch; } .az-detail-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 4px; padding: 24px 0; border-top: 1px solid rgba(255, 215, 0, 0.1); border-bottom: 1px solid rgba(255, 215, 0, 0.1); } .az-detail-stat { padding: 0 24px; display: flex; flex-direction: column; gap: 4px; border-right: 1px solid rgba(255, 215, 0, 0.06); } .az-detail-stat:last-child { border-right: none; } .az-detail-stat-value { font-size: clamp(32px, 3.5vw, 48px); font-weight: 800; letter-spacing: -0.03em; line-height: 1; background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .az-detail-stat-label { font-size: 12px; color: #A0A0A0; letter-spacing: 0.02em; line-height: 1.4; } .az-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; } .az-detail-card { display: flex; flex-direction: column; gap: 12px; padding: 24px; background: rgba(20, 20, 20, 0.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.08); border-radius: 14px; transition: border-color 250ms ease, background 250ms ease, transform 250ms ease; position: relative; overflow: hidden; isolation: isolate; } /* Sweep-shine: a diagonal highlight that rides across the card on hover. Hidden by default (transform off-screen), enters fast then settles. */ .az-detail-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255, 215, 0, 0.10) 50%, transparent 70%); transform: translateX(-110%); transition: transform 0ms; pointer-events: none; z-index: 0; } .az-detail-card > * { position: relative; z-index: 1; } .az-detail-card:hover::after { transform: translateX(110%); transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .az-detail-card:hover { border-color: rgba(255, 215, 0, 0.25); background: rgba(26, 26, 26, 0.55); transform: translateY(-3px); } .az-detail-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; } .az-detail-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.12), rgba(255, 215, 0, 0.03)); border: 1px solid rgba(255, 215, 0, 0.2); color: var(--az-gold, #FFD700); transition: transform 300ms ease, background 300ms ease, border-color 300ms ease; } .az-detail-icon svg { width: 24px; height: 24px; } .az-detail-card:hover .az-detail-icon { transform: scale(1.08) rotate(-2deg); background: linear-gradient(135deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.05)); border-color: rgba(255, 215, 0, 0.4); } .az-detail-num { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; color: rgba(255, 215, 0, 0.6); font-variant-numeric: tabular-nums; } .az-detail-card h3 { font-size: clamp(18px, 1.6vw, 22px); font-weight: 600; letter-spacing: -0.01em; color: #F5F5F5; margin: 0; } .az-detail-card p { font-size: 14px; line-height: 1.55; color: #B0B0B0; margin: 0; max-width: 42ch; } .az-detail-card-tech { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 8px; } .az-tech-pill { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 215, 0, 0.75); padding: 4px 10px; border-radius: 999px; background: rgba(255, 215, 0, 0.06); border: 1px solid rgba(255, 215, 0, 0.15); } /* ─── Final CTA ─── */ .az-final-cta { padding: clamp(80px, 12vw, 180px) clamp(24px, 6vw, 96px); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; border-top: 1px solid rgba(255, 215, 0, 0.06); background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255, 215, 0, 0.06) 0%, transparent 70%); } .az-final-cta h2 { font-size: clamp(40px, 7vw, 96px); font-weight: 800; line-height: 0.95; letter-spacing: -0.035em; margin: 0; color: #F5F5F5; } .az-final-cta > p { font-size: clamp(15px, 1.4vw, 18px); color: #A0A0A0; margin: 0 0 8px; } .az-final-cta .az-landing-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } /* ─── Footer ─── */ .az-landing-footer { padding: 64px clamp(24px, 6vw, 96px) 32px; border-top: 1px solid rgba(255, 215, 0, 0.06); background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(255, 215, 0, 0.04) 0%, transparent 70%); } .az-footer-inner { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; } .az-footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 40px; } .az-footer-brand-block { display: flex; flex-direction: column; gap: 14px; max-width: 320px; } .az-footer-brand { font-weight: 700; letter-spacing: -0.02em; color: #F5F5F5; font-size: 24px; line-height: 1; } .az-footer-tagline { font-size: 13px; color: #A0A0A0; line-height: 1.5; margin: 0; } .az-footer-socials { display: flex; gap: 8px; margin-top: 4px; } .az-footer-socials a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 215, 0, 0.12); color: #A0A0A0; transition: color 200ms ease, border-color 200ms ease, background 200ms ease; } .az-footer-socials a:hover { color: var(--az-gold, #FFD700); border-color: rgba(255, 215, 0, 0.35); background: rgba(255, 215, 0, 0.05); } .az-footer-col { display: flex; flex-direction: column; gap: 10px; } .az-footer-col-title { font-size: 11px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--az-gold, #FFD700); margin-bottom: 4px; } .az-footer-col a, .az-footer-col span:not(.az-footer-col-title) { color: #A0A0A0; text-decoration: none; font-size: 13px; line-height: 1.5; transition: color 200ms ease; } .az-footer-col a:hover { color: #F5F5F5; } .az-footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid rgba(255, 215, 0, 0.06); flex-wrap: wrap; } .az-footer-copy { font-size: 12px; color: #707070; letter-spacing: 0.02em; } .az-footer-status { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #7FD584; } @media (max-width: 1024px) { .az-footer-top { grid-template-columns: 1fr 1fr 1fr; gap: 32px; } .az-footer-brand-block { grid-column: 1 / -1; } } @media (max-width: 600px) { .az-footer-top { grid-template-columns: 1fr 1fr; } .az-footer-bottom { flex-direction: column; align-items: flex-start; } } /* ─── Sticky CTA (appears from Glava 2 onward) ─── */ .az-sticky-cta { position: fixed; left: 50%; bottom: max(env(safe-area-inset-bottom, 16px), 24px); transform: translateX(-50%) translateY(20px); z-index: 80; opacity: 0; pointer-events: none; display: inline-flex; align-items: center; gap: 16px; padding: 10px 10px 10px 20px; background: rgba(10, 10, 10, 0.75); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); border: 1px solid rgba(255, 215, 0, 0.2); border-radius: 999px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 40px rgba(255, 215, 0, 0.06); } .az-sticky-cta-copy { font-size: 13px; font-weight: 600; letter-spacing: 0.04em; color: #D0D0D0; white-space: nowrap; } .btn-sticky { padding: 8px 18px !important; font-size: 13px !important; border-radius: 999px !important; } @media (max-width: 600px) { .az-sticky-cta { left: 12px; right: 12px; transform: translateY(20px); justify-content: space-between; } } /* ─── Initial-hidden states for scroll reveals (JS-enabled only) ─── */ .az-js .az-glava-content > *, .az-js .az-glava-visual, .az-js .az-protocol-card, .az-js .az-rwa-card, .az-js .az-risk-card, .az-js .az-detail-card, .az-js .az-detail-stat, .az-js .az-final-cta > *, .az-js .az-landing-footer { opacity: 0; } /* Reveal non-glava blocks (detail cards, final CTA, footer) the same way the glava content is revealed — via a shared scroll-linked GSAP timeline initialised in initScrollMotion(). */ /* ─── Mobile glava stack ─── */ @media (max-width: 900px) { .az-glava { grid-template-columns: 1fr; gap: 48px; min-height: auto; padding: 48px 24px; } .az-glava-visual { max-width: 360px; } } /* ─── Reduced motion ─── */ @media (prefers-reduced-motion: reduce) { .az-landing-scroll-hint { animation: none; } .az-landing .btn-primary:hover, .az-landing .btn-secondary:hover { transform: none; } } /* ─── Mobile ─── */ @media (max-width: 640px) { .az-landing-hero { padding: 24px; gap: 16px; min-height: 100svh; } .az-landing-hero h1 { max-width: 100%; } .az-landing-cta { width: 100%; } .az-landing .btn-primary, .az-landing .btn-secondary { flex: 1; justify-content: center; } } /* ─── Hero live-stat card (liquid glass) ─── */ /* Floats bottom-right of hero — tickable counters wired in landing.js. The stack uses backdrop-filter for the iOS 26 / VisionOS liquid-glass look: blur the underlying hero video, brush in a faint gold edge, layer two conic gradients that drift to suggest light bending through the glass. */ .az-hero-live-stat { position: absolute; right: clamp(20px, 5vw, 64px); bottom: clamp(80px, 12vh, 120px); display: flex; align-items: flex-start; gap: 18px; padding: 22px 28px; border-radius: 18px; background: rgba(20, 16, 8, 0.42); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); border: 1px solid rgba(255, 215, 0, 0.14); box-shadow: 0 28px 60px -20px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.06); z-index: 3; pointer-events: none; opacity: 0; animation: az-hero-stat-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) 1.4s forwards; } @keyframes az-hero-stat-in { from { opacity: 0; transform: translateY(20px) scale(0.96); } to { opacity: 1; transform: translateY(0) scale(1); } } .az-hero-live-stat-dot { flex: 0 0 8px; width: 8px; height: 8px; margin-top: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); animation: az-hero-stat-pulse 1.8s ease-out infinite; } @keyframes az-hero-stat-pulse { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); } 70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } } .az-hero-live-stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 32px; } .az-hero-live-stat-cell { display: flex; flex-direction: column; gap: 4px; min-width: 80px; } .az-hero-live-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; color: rgba(255, 245, 215, 0.55); } .az-hero-live-stat-value { font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 1.35rem; color: var(--az-gold-light, #FFE14D); font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(255, 215, 0, 0.18); } @media (max-width: 768px) { .az-hero-live-stat { left: 16px; right: 16px; bottom: 90px; padding: 16px 18px; } .az-hero-live-stat-grid { gap: 12px 20px; } .az-hero-live-stat-value { font-size: 1.1rem; } } /* ─── Protocol chain marquee ─── */ /* Two duplicated tracks of identical SVGs scroll at constant linear speed. Translating by exactly -100/repeat % each loop keeps the seam invisible. Mask-image fades the edges so logos don't pop in/out abruptly. */ .az-marquee-section { padding: 48px 0; border-top: 1px solid rgba(255, 215, 0, 0.06); border-bottom: 1px solid rgba(255, 215, 0, 0.06); overflow: hidden; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(255,215,0,0.015) 50%, rgba(0,0,0,0) 100%); } .az-marquee { --marquee-duration: 30s; --marquee-repeat: 2; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%); } .az-marquee-track { display: flex; gap: 56px; align-items: center; width: max-content; animation: az-marquee var(--marquee-duration) linear infinite; } .az-marquee:hover .az-marquee-track { animation-play-state: paused; } @keyframes az-marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% / var(--marquee-repeat))); } } .az-marquee-item { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; opacity: 0.92; transition: opacity 200ms ease, transform 200ms ease; } .az-marquee-item:hover { opacity: 1; transform: scale(1.08); } .az-marquee-item img { width: 100%; height: 100%; object-fit: contain; } /* ─── Bento grid (replaces orbit-rings on glava-1) ─── */ /* 4-column grid: featured card spans 2×2, two right column cards 1×1 each, wide card spans full bottom row, last is 1×1. Asymmetric weight pulls the eye to the featured card first. */ .az-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(120px, auto); gap: 16px; width: 100%; max-width: 640px; } .az-bento-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, rgba(14, 12, 6, 0.96) 0%, rgba(6, 5, 2, 0.96) 100%); border: 1px solid rgba(255, 215, 0, 0.10); overflow: hidden; cursor: default; will-change: transform; grid-column: span 2; transition: border-color 280ms ease; opacity: 0; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.45); } .az-bento-card:hover { border-color: rgba(255, 215, 0, 0.28); } .az-bento-card-featured { grid-column: span 2; grid-row: span 2; background: linear-gradient(140deg, rgba(36, 27, 8, 0.97) 0%, rgba(8, 6, 2, 0.97) 60%); } .az-bento-card-wide { grid-column: span 4; } .az-bento-card-eyebrow { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 245, 215, 0.50); } .az-bento-card-headline { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 1.7rem; line-height: 1.1; color: var(--az-gold-light, #FFE14D); background: linear-gradient(135deg, #FCF6BA 0%, #BF953F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .az-bento-card-featured .az-bento-card-headline { font-size: 2.3rem; } .az-bento-card-sub { font-size: 0.88rem; color: rgba(245, 235, 215, 0.65); line-height: 1.45; } .az-bento-card-glow { position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(420px circle at var(--mouse-x, -100px) var(--mouse-y, -100px), rgba(255, 215, 0, 0.14), transparent 40%); opacity: 0; transition: opacity 260ms ease; } .az-bento-card:hover .az-bento-card-glow { opacity: 1; } .az-bento-spark { margin-top: auto; width: 100%; height: 56px; } .az-bento-spark svg { width: 100%; height: 100%; } .az-bento-pulse { display: flex; gap: 6px; margin-top: auto; align-items: center; } .az-bento-pulse span { width: 6px; height: 6px; border-radius: 50%; background: var(--az-gold); animation: az-bento-pulse 1.8s cubic-bezier(0.4, 0, 0.6, 1) infinite; } .az-bento-pulse span:nth-child(2) { animation-delay: 0.2s; } .az-bento-pulse span:nth-child(3) { animation-delay: 0.4s; } @keyframes az-bento-pulse { 0%, 80%, 100% { opacity: 0.3; transform: scale(1); } 40% { opacity: 1; transform: scale(1.4); } } @media (max-width: 768px) { .az-bento { grid-template-columns: repeat(2, 1fr); max-width: 100%; } .az-bento-card, .az-bento-card-featured, .az-bento-card-wide { grid-column: span 2; grid-row: span 1; } } /* ─── Paste-address interactive demo (glava-1 visual) ─── */ /* A scripted timeline that mimics the product flow: type → detect → scan → reveal balances → tick total. State machine lives in landing.js; this CSS only owns the visuals + transitions. Card frame mirrors a terminal-style "glass slab" — dark, gold-bordered, with chrome dots up top. */ .az-glava-visual-demo { display: flex; align-items: center; justify-content: center; } .az-paste-demo { position: relative; width: 100%; max-width: 520px; padding: 22px 24px 20px; border-radius: 22px; background: linear-gradient(180deg, rgba(14, 12, 6, 0.97) 0%, rgba(4, 3, 1, 0.97) 100%); border: 1px solid rgba(255, 215, 0, 0.14); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 215, 0, 0.04) inset, 0 1px 0 rgba(255, 215, 0, 0.08) inset; overflow: hidden; isolation: isolate; backdrop-filter: blur(8px); } .az-paste-demo-glow { position: absolute; inset: -40% -20% auto auto; width: 70%; height: 70%; background: radial-gradient(closest-side, rgba(255, 215, 0, 0.16), transparent 70%); filter: blur(20px); pointer-events: none; z-index: 0; } .az-paste-demo > *:not(.az-paste-demo-glow) { position: relative; z-index: 1; } /* — chrome bar — */ .az-paste-demo-chrome { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid rgba(255, 215, 0, 0.08); } .az-paste-demo-chrome-dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, 0.10); } .az-paste-demo-chrome-dot:nth-child(1) { background: rgba(255, 95, 86, 0.55); } .az-paste-demo-chrome-dot:nth-child(2) { background: rgba(255, 189, 46, 0.55); } .az-paste-demo-chrome-dot:nth-child(3) { background: rgba(39, 201, 63, 0.55); } .az-paste-demo-chrome-title { margin-left: 8px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.45); } .az-paste-demo-chrome-status { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 215, 0, 0.65); } .az-paste-demo-pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: #27c93f; box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.6); animation: paste-demo-pulse 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes paste-demo-pulse { 0% { box-shadow: 0 0 0 0 rgba(39, 201, 63, 0.55); } 70% { box-shadow: 0 0 0 7px rgba(39, 201, 63, 0); } 100% { box-shadow: 0 0 0 0 rgba(39, 201, 63, 0); } } /* — address input — */ .az-paste-demo-input { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } .az-paste-demo-input-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.40); } .az-paste-demo-input-field { display: flex; align-items: center; min-height: 38px; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 215, 0, 0.10); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 13px; color: #fff; letter-spacing: 0.01em; word-break: break-all; line-height: 1.4; } .az-paste-demo-input-text { background: linear-gradient(90deg, #fff 0%, rgba(255, 215, 0, 0.95) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .az-paste-demo-input-caret { display: inline-block; width: 7px; height: 14px; margin-left: 2px; background: var(--az-gold, #FFD700); box-shadow: 0 0 8px rgba(255, 215, 0, 0.7); animation: paste-demo-caret 0.9s step-end infinite; } @keyframes paste-demo-caret { 50% { opacity: 0; } } /* — network detect chips — */ .az-paste-demo-detect { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .az-paste-demo-detect-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255, 255, 255, 0.40); transition: color 240ms ease; } .az-paste-demo-detect-label.locked { color: rgba(255, 215, 0, 0.75); } .az-paste-demo-detect-chips { display: flex; flex-wrap: wrap; gap: 6px; } .az-paste-demo-chip { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.50); font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; letter-spacing: 0.04em; transition: all 240ms ease; } .az-paste-demo-chip.flash { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.20); color: rgba(255, 255, 255, 0.85); } .az-paste-demo-chip.locked { background: linear-gradient(135deg, rgba(255, 215, 0, 0.14), rgba(212, 175, 0, 0.08)); border-color: rgba(255, 215, 0, 0.45); color: #FFD700; box-shadow: 0 0 16px rgba(255, 215, 0, 0.22); } .az-paste-demo-chip.locked::before { content: '✓'; margin-right: 5px; font-weight: 700; } /* — scan bar — */ .az-paste-demo-scan { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; opacity: 0; transition: opacity 260ms ease; } .az-paste-demo-scan.active { opacity: 1; } .az-paste-demo-scan-head { display: flex; justify-content: space-between; align-items: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); } .az-paste-demo-scan-head span:last-child { color: rgba(255, 215, 0, 0.75); } .az-paste-demo-scan-bar { position: relative; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .az-paste-demo-scan-bar > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, rgba(255, 215, 0, 0.4), #FFD700, rgba(255, 215, 0, 0.4)); box-shadow: 0 0 12px rgba(255, 215, 0, 0.55); transition: width 240ms cubic-bezier(0.22, 1, 0.36, 1); } /* — balance rows (created at runtime) — */ .az-paste-demo-balances { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; /* Reserve space for the tallest scenario (4 rows). Without this, page content under the card shifts every cycle as balance rows append/clear (EVM 4 rows → Solana 3 → Bitcoin 1 → reset). On desktop the card floats beside the headline so the bounce only affects the card itself; on tablet/mobile it sits inline and pushes everything below it up and down. Constant height = no jumping. Value picked from live measurement of the rendered 4-row state. */ min-height: 270px; } .az-paste-demo-balance { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.02); border: 1px solid rgba(255, 215, 0, 0.06); opacity: 0; transform: translateY(8px); transition: opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1); } .az-paste-demo-balance.show { opacity: 1; transform: translateY(0); } .az-paste-demo-balance-icon { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.04); } .az-paste-demo-balance-icon img { width: 100%; height: 100%; object-fit: contain; } .az-paste-demo-balance-meta { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; } .az-paste-demo-balance-symbol { font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: #fff; letter-spacing: 0.01em; } .az-paste-demo-balance-chain { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; color: rgba(255, 255, 255, 0.45); letter-spacing: 0.05em; text-transform: uppercase; } .az-paste-demo-balance-amount { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; } .az-paste-demo-balance-qty { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.02em; } .az-paste-demo-balance-usd { font-family: 'Manrope', system-ui, sans-serif; font-size: 13px; font-weight: 600; color: var(--az-gold, #FFD700); letter-spacing: 0.01em; } /* — total bar — */ .az-paste-demo-total { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(135deg, rgba(255, 215, 0, 0.10) 0%, rgba(170, 119, 28, 0.04) 100%); border: 1px solid rgba(255, 215, 0, 0.22); margin-bottom: 12px; box-shadow: 0 0 28px rgba(255, 215, 0, 0.10); } .az-paste-demo-total-head { display: flex; justify-content: space-between; align-items: center; } .az-paste-demo-total-label { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); } .az-paste-demo-total-pill { padding: 3px 9px; border-radius: 999px; background: rgba(39, 201, 63, 0.12); border: 1px solid rgba(39, 201, 63, 0.30); color: #4ade80; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; opacity: 0; transition: opacity 280ms ease; } .az-paste-demo-total-pill.show { opacity: 1; } .az-paste-demo-total-value { font-family: 'Manrope', system-ui, sans-serif; font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; background: linear-gradient(90deg, #fff 0%, #FFD700 60%, #BF953F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* — footer — */ .az-paste-demo-footer { display: flex; align-items: center; justify-content: center; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 10px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.35); text-transform: uppercase; } .az-paste-demo-footer-meta { transition: color 240ms ease, opacity 240ms ease; } /* — responsive — */ @media (max-width: 1024px) { .az-paste-demo { max-width: 100%; padding: 18px 18px 16px; } .az-paste-demo-total-value { font-size: 24px; } .az-paste-demo-input-field { font-size: 12px; padding: 7px 10px; min-height: 34px; } } @media (prefers-reduced-motion: reduce) { .az-paste-demo-input-caret, .az-paste-demo-pulse-dot { animation: none; } .az-paste-demo-balance { opacity: 1; transform: none; } .az-paste-demo-scan { opacity: 1; } .az-paste-demo-total-pill { opacity: 1; } } /* ─── Glass-magnetic universal modifier ─── */ /* Adds the cursor-tracked radial spotlight to any card. Pair it with the JS pointer-mover (initMagneticCards) which updates --mouse-x / --mouse-y in pixel coords relative to the card's bounding rect. */ .az-glass-magnetic { position: relative; } .az-glass-magnetic::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(220px circle at var(--mouse-x, -1000px) var(--mouse-y, -1000px), rgba(255, 215, 0, 0.10), transparent 55%); opacity: 0; transition: opacity 220ms ease; pointer-events: none; } .az-glass-magnetic:hover::before { opacity: 1; } /* ─── Beam-border button (animated rotating conic) ─── */ /* CTA gets a thin gold beam rotating around its perimeter. Trick: a rotating conic-gradient on a sibling pseudo, masked to a 1.5px ring via composite- exclude on the inner solid fill. Pure CSS, ~3% GPU on a M-series. */ .btn-beam { position: relative; isolation: isolate; overflow: hidden; } .btn-beam-bg { position: absolute; inset: -150%; z-index: -1; background: conic-gradient(from 0deg, transparent 0deg, rgba(255, 215, 0, 0.0) 60deg, rgba(255, 215, 0, 0.85) 90deg, rgba(252, 246, 186, 1) 120deg, rgba(255, 215, 0, 0.0) 150deg, transparent 360deg); animation: az-beam-rotate 4s linear infinite; } @keyframes az-beam-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .btn-beam::before { /* Inner mask — covers everything except the 1.5px ring around the edge */ content: ''; position: absolute; inset: 1.5px; border-radius: inherit; background: linear-gradient(135deg, #1a1308 0%, #0d0a05 100%); z-index: -1; } .btn-beam-label { position: relative; z-index: 1; background: linear-gradient(135deg, #FCF6BA 0%, #BF953F 50%, #FCF6BA 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 600; } @media (prefers-reduced-motion: reduce) { .az-marquee-track, .btn-beam-bg, .az-bento-pulse span, .az-hero-live-stat-dot { animation: none !important; } .az-hero-live-stat { opacity: 1; transform: none; } } /* ════════════════════════════════════════════════════════════════════════ LandingScrollStory — pinned 4-scene scroll story driven by GSAP scrub. ──────────────────────────────────────────────────────────────────────── The outer .az-story takes 500vh of document height; .az-story-stage is sticky inside and pinned by GSAP. Children of .az-story-stage are absolute-positioned and animated by the timeline in landing.js. ════════════════════════════════════════════════════════════════════════ */ .az-story { position: relative; height: 500vh; background: linear-gradient(180deg, #050505 0%, #0a0805 100%); /* IMPORTANT: don't add `contain: layout/paint` here — it would create a new containing block for descendant position:fixed elements, which breaks GSAP's pin (it pins via position:fixed expecting viewport coords, not parent-relative). Verified in Chrome 140 / Safari 26. */ } .az-story-stage { position: sticky; top: 0; height: 100vh; width: 100%; overflow: hidden; perspective: 1200px; display: flex; align-items: center; justify-content: center; } /* ─── Captions ─── */ .az-story-caption { position: absolute; top: 12%; left: 50%; transform: translateX(-50%); font-size: clamp(40px, 6vw, 88px); font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; text-align: center; color: #F5F5F5; opacity: 0; margin: 0; pointer-events: none; z-index: 5; white-space: nowrap; } /* ─── Orbit + tokens ─── */ .az-story-orbit { position: absolute; width: 0; height: 0; transform-style: preserve-3d; will-change: transform, opacity; } .az-story-ring { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(255, 215, 0, 0.18); border-radius: 50%; transform: translate(-50%, -50%); } .az-story-ring-1 { width: 440px; height: 440px; border-color: rgba(255, 215, 0, 0.22); } .az-story-ring-2 { width: 680px; height: 680px; border-color: rgba(255, 215, 0, 0.12); } .az-story-ring-3 { width: 920px; height: 920px; border-color: rgba(255, 215, 0, 0.06); } .az-story-orbit-core { position: absolute; left: 50%; top: 50%; width: 96px; height: 96px; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(255, 215, 0, 0.20) 0%, transparent 70%); display: flex; align-items: center; justify-content: center; border-radius: 50%; will-change: transform, opacity; } .az-story-orbit-core img { width: 64px; height: 64px; filter: drop-shadow(0 0 20px rgba(255, 215, 0, 0.4)); } .az-story-token { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; --orbit-radius: 220px; --orbit-angle: 0deg; transform: translate(-50%, -50%) rotate(var(--orbit-angle)) translateY(calc(-1 * var(--orbit-radius))) rotate(calc(-1 * var(--orbit-angle))); will-change: transform, opacity; } .az-story-token-outer { width: 44px; height: 44px; opacity: 0.85; } .az-story-token img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.6)); } /* ─── Hero token (huge centre-stage coin in scene 2) ─── */ .az-story-hero-token { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; transform: translate(-50%, -50%) scale(0); opacity: 0; will-change: transform, opacity; z-index: 4; } .az-story-hero-token img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 30px 80px rgba(255, 215, 0, 0.4)); position: relative; z-index: 1; } .az-story-hero-token-glow { position: absolute; inset: -40%; background: radial-gradient(circle, rgba(255, 215, 0, 0.25) 0%, transparent 60%); pointer-events: none; z-index: 0; } /* ─── Dashboard tile (scene 3) ─── */ .az-story-tile { position: absolute; left: 50%; top: 50%; width: 420px; padding: 24px; border-radius: 18px; background: rgba(20, 16, 8, 0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 215, 0, 0.20); box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%) scale(0.7); opacity: 0; will-change: transform, opacity; z-index: 4; } .az-story-tile-head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .az-story-tile-mark { width: 40px; height: 40px; border-radius: 10px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: rgba(255, 215, 0, 0.08); } .az-story-tile-mark img { width: 100%; height: 100%; object-fit: contain; } .az-story-tile-meta { display: flex; flex-direction: column; flex: 1; } .az-story-tile-name { color: #F5F5F5; font-weight: 700; font-size: 1.05rem; } .az-story-tile-sub { color: rgba(255, 245, 215, 0.5); font-size: 0.78rem; } .az-story-tile-hf { color: #4ade80; font-weight: 700; font-size: 0.95rem; padding: 4px 10px; border-radius: 8px; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.3); } .az-story-tile-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 0.92rem; color: rgba(245, 235, 215, 0.85); border-bottom: 1px solid rgba(255, 215, 0, 0.06); } .az-story-tile-row:last-of-type { border-bottom: none; } .az-story-tile-row span:last-child { color: var(--az-gold-light, #FFE14D); font-weight: 600; font-variant-numeric: tabular-nums; } .az-story-tile-bar { margin-top: 14px; height: 6px; background: rgba(255, 255, 255, 0.06); border-radius: 3px; overflow: hidden; } .az-story-tile-bar-fill { height: 100%; width: 68%; background: linear-gradient(90deg, #BF953F 0%, #FCF6BA 100%); border-radius: 3px; } /* ─── Risk gauge (scene 4) ─── */ .az-story-gauge { position: absolute; left: 50%; top: 50%; width: 420px; transform: translate(-50%, -50%) scale(0.7); opacity: 0; will-change: transform, opacity; z-index: 4; text-align: center; } .az-story-gauge svg { width: 100%; height: auto; display: block; } .az-story-gauge-readout { margin-top: -28px; } .az-story-gauge-label { display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255, 245, 215, 0.55); } .az-story-gauge-value { display: block; margin-top: 6px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 2.3rem; color: var(--az-gold-light, #FFE14D); background: linear-gradient(135deg, #FCF6BA 0%, #BF953F 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } @media (max-width: 768px) { .az-story-tile { width: 92vw; max-width: 360px; } .az-story-gauge { width: 92vw; max-width: 360px; } .az-story-hero-token { width: 200px; height: 200px; } .az-story-token { width: 40px; height: 40px; } .az-story-token-outer { width: 32px; height: 32px; } .az-story-ring-1 { width: 320px; height: 320px; } .az-story-ring-2 { width: 500px; height: 500px; } .az-story-ring-3 { width: 680px; height: 680px; } .az-story-caption { font-size: clamp(28px, 9vw, 56px); white-space: normal; padding: 0 20px; } } @media (prefers-reduced-motion: reduce) { .az-story { height: auto; } .az-story-stage { position: relative; height: auto; padding: 80px 20px; } .az-story-caption[data-story-caption-1] { opacity: 1; position: relative; top: 0; transform: none; margin-bottom: 40px; } .az-story-caption[data-story-caption-2], .az-story-caption[data-story-caption-3], .az-story-caption[data-story-caption-4], .az-story-hero-token, .az-story-tile, .az-story-gauge { display: none; } } ──────────────────────────────────────────────────────────────────────── Chrome 115+, Edge 115+, Safari 26+. Firefox falls through to GSAP reveals already wired in landing.js (toggleActions: play none none reverse). Each glava gets its own view-timeline. Two animations are bound: • Section-level — scale/opacity/blur that morphs the whole section as it enters from below, peaks in the middle, then dims+blurs as it exits. • Inner-level — content side translates +20px from below, visual side translates +40px and scales 1.04 → 1.00 → 0.98 (depth/parallax). ════════════════════════════════════════════════════════════════════════ */ /* Scroll-snap track: proximity so it doesn't fight short content sections. The first viewport-height of hero is also a snap point so user can rewind to the top easily. Only enabled when scroll-driven animations are supported — otherwise scroll-snap without the scale/blur reads as broken. */ @supports (animation-timeline: view()) { html { scroll-snap-type: y proximity; scroll-behavior: smooth; } .az-landing-hero, .az-glava, .az-detail-reveal, .az-final-cta { scroll-snap-align: start; scroll-snap-stop: normal; } } /* Section-level morph — runs across each glava's entry/exit through the viewport (entry-30%, exit-30% so the transition feels cinematic without stealing too much real estate from middle-of-section reading). */ @supports (animation-timeline: view()) { .az-glava { view-timeline-name: --glava-view; view-timeline-axis: block; animation: az-glava-cinematic linear both; animation-timeline: --glava-view; animation-range: entry 5% exit 95%; } .az-glava-content > * { animation: az-content-slide linear both; animation-timeline: --glava-view; animation-range: entry 15% cover 30%; } .az-glava-visual { animation: az-visual-parallax linear both; animation-timeline: --glava-view; animation-range: entry 0% exit 100%; } } @keyframes az-glava-cinematic { 0% { opacity: 0; transform: translateY(60px) scale(0.96); } 15% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes az-content-slide { from { opacity: 0; transform: translateY(48px); } to { opacity: 1; transform: translateY(0); } } @keyframes az-visual-parallax { 0% { transform: translateY(80px) scale(0.94); } 50% { transform: translateY(0) scale(1); } 100% { transform: translateY(-80px) scale(1.04); } } /* Hero gets a separate, gentler timeline — it pins more, scales the bg video as the user starts scrolling so it feels like zooming into the content rather than blunt scrolling past. */ @supports (animation-timeline: view()) { .az-landing-hero { view-timeline-name: --hero-view; view-timeline-axis: block; } .az-landing-hero-inner { animation: az-hero-inner-exit linear both; animation-timeline: --hero-view; animation-range: exit 0% exit 100%; } .az-hero-live-stat { animation: az-stat-park linear both; animation-timeline: --hero-view; animation-range: exit 0% exit 100%; } .az-hero-video { animation: az-hero-video-zoom linear both; animation-timeline: --hero-view; animation-range: entry 0% exit 100%; } } @keyframes az-hero-inner-exit { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-80px) scale(0.92); } } @keyframes az-stat-park { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-40px) scale(0.85); } } @keyframes az-hero-video-zoom { 0% { transform: scale(1) translateY(0); opacity: 1; } 100% { transform: scale(1.18) translateY(-8vh); opacity: 0.4; } } /* Section bridges — gradient overlays slung between glavas so the colour doesn't snap; it flows. Implemented as a `::before` on the glava that inherits from the previous one's palette. */ .az-glava-portfolio { background: linear-gradient(180deg, #050505 0%, #0a0805 100%); } .az-glava-lending { background: linear-gradient(180deg, #0a0805 0%, #100a05 100%); } .az-glava-xstocks { background: linear-gradient(180deg, #100a05 0%, #0a0a12 100%); } .az-glava-risk { background: linear-gradient(180deg, #0a0a12 0%, #050505 100%); } .az-glava::after { content: ''; position: absolute; inset: auto 0 0 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255,215,0,0.25) 50%, transparent 100%); pointer-events: none; } .az-glava { position: relative; overflow: hidden; } /* Ambient gold orb behind each glava — translates and shifts colour as the section scrolls. Adds the "luxury cosmos" feel without WebGL. */ .az-glava::before { content: ''; position: absolute; width: 80vmax; height: 80vmax; border-radius: 50%; background: radial-gradient(circle, rgba(255, 215, 0, 0.08) 0%, transparent 55%); pointer-events: none; z-index: 0; filter: blur(40px); } .az-glava-portfolio::before { top: -40vmax; right: -30vmax; } .az-glava-lending::before { bottom: -40vmax; left: -30vmax; background: radial-gradient(circle, rgba(255, 215, 0, 0.06) 0%, transparent 55%); } .az-glava-xstocks::before { top: -40vmax; left: -25vmax; background: radial-gradient(circle, rgba(139, 92, 246, 0.05) 0%, transparent 55%); } .az-glava-risk::before { bottom: -40vmax; right: -25vmax; background: radial-gradient(circle, rgba(229, 57, 53, 0.045) 0%, transparent 55%); } @supports (animation-timeline: view()) { .az-glava::before { animation: az-orb-drift linear both; animation-timeline: --glava-view; animation-range: entry 0% exit 100%; } } @keyframes az-orb-drift { from { transform: translate(0, 60px) scale(0.8); opacity: 0.4; } to { transform: translate(0, -60px) scale(1.2); opacity: 0.9; } } .az-glava-content, .az-glava-visual { position: relative; z-index: 1; } /* Detail-reveal + final-cta also get the view-timeline morph so the whole landing flows. The final-CTA closer is the LAST section before the footer so it never reaches the `exit` phase on normal viewports — anchoring the end of the range to `exit` froze opacity mid-progress (~0.5) and the CTA looked dimmed. Bound it to `cover 0%` (animation completes the moment the section is fully in view) so it lands at opacity:1 and stays there. */ @supports (animation-timeline: view()) { .az-detail-reveal { animation: az-glava-cinematic linear both; animation-timeline: view(); animation-range: entry 10% exit 90%; } .az-final-cta { animation: az-glava-cinematic linear both; animation-timeline: view(); animation-range: entry 0% cover 0%; } } /* ═════════════════════════════════════════════════════════════════════════ HERO PARALLAX (replaces .az-landing-hero — reference 21st.dev/larsen66) Layered scroll: aurora → vertical ticker rails (L/R) → scattered chain orb logos → floating side cards → centred copy + tracker CTA → scroll hint. Each `data-depth` element is translated by JS (initHeroParallax) proportional to scroll progress, which produces the parallax depth. The mouse-tilt CSS vars (--parallax-x/y) are still set by the same JS. ═════════════════════════════════════════════════════════════════════════ */ .az-hero-px { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; background: radial-gradient(ellipse 60% 50% at 50% 110%, rgba(255, 215, 0, 0.06), transparent 60%), radial-gradient(ellipse 80% 60% at 50% -10%, rgba(255, 215, 0, 0.04), transparent 60%), #000; } /* ── Aurora — slow radial blobs behind everything ───────────────────── */ .az-hero-px-aurora { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .az-hero-px-aurora span { position: absolute; display: block; border-radius: 50%; filter: blur(80px); opacity: 0.55; mix-blend-mode: screen; will-change: transform; } .az-hero-px-aurora-a { width: 720px; height: 720px; left: -240px; top: -140px; background: radial-gradient(circle, rgba(255, 215, 0, 0.28), transparent 70%); animation: az-hero-px-aurora-float 18s ease-in-out infinite alternate; } .az-hero-px-aurora-b { width: 620px; height: 620px; right: -180px; top: 18%; background: radial-gradient(circle, rgba(212, 175, 55, 0.22), transparent 70%); animation: az-hero-px-aurora-float 22s ease-in-out infinite alternate-reverse; } .az-hero-px-aurora-c { width: 880px; height: 880px; left: 20%; bottom: -360px; background: radial-gradient(circle, rgba(191, 149, 63, 0.20), transparent 70%); animation: az-hero-px-aurora-float 26s ease-in-out infinite alternate; } @keyframes az-hero-px-aurora-float { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(40px, -30px, 0) scale(1.15); } } /* ── Vertical ticker rails — left + right ───────────────────────────── */ .az-hero-px-rail { position: absolute; top: 0; bottom: 0; width: clamp(160px, 14vw, 220px); overflow: hidden; z-index: 2; pointer-events: none; /* Side rails fade at top + bottom so the ticker doesn't slam into the headline / scroll-hint. */ mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); } .az-hero-px-rail-left { left: 0; } .az-hero-px-rail-right { right: 0; } .az-hero-px-rail-track { display: flex; flex-direction: column; gap: 14px; padding: 24px 18px; animation: az-hero-px-rail-scroll 42s linear infinite; will-change: transform; } .az-hero-px-rail[data-rail-dir="dn"] .az-hero-px-rail-track { animation-direction: reverse; } @keyframes az-hero-px-rail-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } .az-hero-px-rail-row { display: grid; grid-template-columns: 6px 1fr auto; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.06em; color: rgba(245, 245, 245, 0.62); font-variant-numeric: tabular-nums; text-transform: uppercase; background: rgba(20, 20, 20, 0.45); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 8px 10px; backdrop-filter: blur(6px); } .az-hero-px-rail-row em { color: rgba(245, 245, 245, 0.9); font-style: normal; font-weight: 600; padding-left: 4px; } .az-hero-px-rail-row i { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: 0.02em; } .az-hero-px-rail-row i.up { color: #4ade80; } .az-hero-px-rail-row i.dn { color: #ef5350; } .az-hero-px-rail-tick { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px rgba(74, 222, 128, 0.6); animation: az-hero-px-tick-pulse 2.4s ease-in-out infinite; } .az-hero-px-rail-tick.gld { background: var(--az-gold); box-shadow: 0 0 8px rgba(255, 215, 0, 0.6); } @keyframes az-hero-px-tick-pulse { 0%, 100% { opacity: 0.6; transform: scale(1); } 50% { opacity: 1; transform: scale(1.4); } } /* ── Scattered chain orbs (mid layer) ───────────────────────────────── */ .az-hero-px-orbs { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; } .az-hero-px-orb { position: absolute; left: var(--ox); top: var(--oy); width: var(--os); height: var(--os); transform: translate(-50%, -50%) translate3d( calc(var(--parallax-x, 0) * 12px), calc(var(--parallax-y, 0) * 10px), 0 ); transition: transform 380ms cubic-bezier(.2,.6,.2,1); filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4)) drop-shadow(0 0 18px rgba(255, 215, 0, 0.08)); opacity: 0.78; will-change: transform; } .az-hero-px-orb img { width: 100%; height: 100%; display: block; border-radius: 50%; background: #141414; padding: calc(var(--os) * 0.16); } /* ── Floating side cards (mid-back) ─────────────────────────────────── */ .az-hero-px-card { position: absolute; z-index: 4; background: linear-gradient(180deg, rgba(14, 14, 14, 0.92) 0%, rgba(6, 6, 6, 0.92) 100%); border: 1px solid rgba(255, 215, 0, 0.12); border-radius: 16px; padding: 14px 16px; box-shadow: 0 28px 64px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05); color: rgba(245, 245, 245, 0.94); font-size: 12px; min-width: 260px; max-width: 300px; display: flex; flex-direction: column; gap: 2px; transform: translate3d( calc(var(--parallax-x, 0) * 8px), calc(var(--parallax-y, 0) * 6px), 0 ); transition: transform 420ms cubic-bezier(.2,.6,.2,1); } .az-hero-px-card-left { left: clamp(180px, 16vw, 260px); top: 8%; } .az-hero-px-card-right { right: clamp(180px, 16vw, 260px); top: 5%; } .az-hero-px-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .az-hero-px-card-mark { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } .az-hero-px-card-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .az-hero-px-card-name { font-weight: 700; font-size: 14px; } .az-hero-px-card-sub { color: rgba(160, 160, 160, 0.85); font-size: 11px; letter-spacing: 0.02em; margin-top: 2px; } .az-hero-px-card-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; font-size: 12px; } .az-hero-px-card-row:first-of-type { border-top: 0; } .az-hero-px-card-row span { color: rgba(160, 160, 160, 0.85); } .az-hero-px-card-hf .hf-safe { color: #4ade80; font-weight: 700; } .az-hero-px-card-bar { margin-top: 8px; height: 4px; background: rgba(255, 255, 255, 0.05); border-radius: 999px; overflow: hidden; } .az-hero-px-card-bar > span { display: block; height: 100%; background: linear-gradient(90deg, var(--az-gold), #b38728); border-radius: 999px; } .az-hero-px-card-pill { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(74, 222, 128, 0.12); color: #4ade80; margin-left: auto; } .az-hero-px-card-pill.up { background: rgba(74, 222, 128, 0.12); color: #4ade80; } .az-hero-px-card-pill.dn { background: rgba(239, 83, 80, 0.12); color: #ef5350; } .az-hero-px-card-big { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin: 4px 0 8px; } .az-hero-px-card-spark { display: block; width: 100%; height: 48px; } /* ── Centred copy + tracker CTA ──────────────────────────────────────── */ .az-hero-px-inner { position: relative; z-index: 5; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: clamp(24px, 6vw, 96px); gap: 18px; pointer-events: none; /* children re-enable */ } .az-hero-px-inner > * { pointer-events: auto; } .az-hero-px-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 215, 0, 0.78); font-weight: 600; padding: 6px 14px; border: 1px solid rgba(255, 215, 0, 0.18); border-radius: 999px; background: rgba(255, 215, 0, 0.04); } .az-hero-px-eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--az-gold); box-shadow: 0 0 10px rgba(255, 215, 0, 0.8); animation: az-hero-px-tick-pulse 2.4s ease-in-out infinite; } .az-hero-px h1 { font-size: clamp(48px, 8vw, 120px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.96; margin: 0; visibility: hidden; perspective: 800px; color: #F5F5F5; text-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); } .az-hero-px h1 .az-glava-accent, .az-hero-px h1 .az-glava-accent .az-char { background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .az-hero-px h1 .az-hero-line { display: block; overflow: hidden; padding-bottom: 0.1em; } .az-hero-px h1 .az-char { display: inline-block; will-change: transform, opacity; transform-origin: 50% 100%; } .az-hero-px-sub { max-width: 640px; margin: 0 auto; color: rgba(245, 245, 245, 0.78); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.55; } /* ── Tracker pill (new CTA) ──────────────────────────────────────────── */ .az-hero-px-tracker { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; width: min(560px, 92%); background: rgba(20, 20, 20, 0.7); border: 1px solid rgba(255, 215, 0, 0.18); border-radius: 999px; padding: 8px 10px 8px 16px; backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 0 0 4px rgba(255, 215, 0, 0.02); transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease; } .az-hero-px-tracker:focus-within { border-color: rgba(255, 215, 0, 0.55); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 0 4px rgba(255, 215, 0, 0.08); transform: translateY(-1px); } .az-hero-px-tracker-chip { width: 28px; height: 28px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; flex-shrink: 0; } .az-hero-px-tracker-chip img { width: 20px; height: 20px; transition: opacity 220ms ease; } .az-hero-px-tracker-input { background: transparent; border: 0; color: rgba(245, 245, 245, 0.95); font-family: inherit; font-size: 14px; font-variant-numeric: tabular-nums; letter-spacing: 0; padding: 8px 4px; width: 100%; outline: 0; min-width: 0; } .az-hero-px-tracker-input::placeholder { color: rgba(160, 160, 160, 0.7); font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: 0.02em; } .az-hero-px-tracker-go { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--az-gold-gradient); color: #0a0a0a; display: grid; place-items: center; cursor: pointer; transition: transform 220ms cubic-bezier(.2,.6,.2,1), box-shadow 220ms ease; box-shadow: 0 8px 24px rgba(255, 215, 0, 0.35); } .az-hero-px-tracker-go:hover { transform: translateY(-1px) scale(1.04); box-shadow: 0 12px 32px rgba(255, 215, 0, 0.5); } .az-hero-px-tracker-go:active { transform: translateY(0) scale(0.98); } .az-hero-px-tracker-hint { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; color: rgba(160, 160, 160, 0.7); } .az-hero-px-tracker-or { letter-spacing: 0.04em; } .az-hero-px-tracker-quiet { color: rgba(255, 215, 0, 0.85); text-decoration: none; border-bottom: 1px dashed rgba(255, 215, 0, 0.3); padding-bottom: 1px; } .az-hero-px-tracker-quiet:hover { color: var(--az-gold); border-bottom-color: rgba(255, 215, 0, 0.7); } .az-hero-px-pillrow { list-style: none; margin: 4px 0 0; padding: 0; display: inline-flex; flex-wrap: wrap; gap: 6px; justify-content: center; } .az-hero-px-pillrow li { font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(160, 160, 160, 0.7); padding: 4px 10px; border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 999px; background: rgba(255, 255, 255, 0.02); } /* Responsive — hide rails on narrow screens, collapse side cards */ @media (max-width: 1100px) { .az-hero-px-card-left { left: 12px; top: 14%; min-width: 200px; max-width: 220px; transform: scale(0.86); transform-origin: top left; } .az-hero-px-card-right { right: 12px; top: 12%; min-width: 200px; max-width: 220px; transform: scale(0.86); transform-origin: top right; } } @media (max-width: 880px) { .az-hero-px-rail { display: none; } .az-hero-px-card { display: none; } .az-hero-px-orb { opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .az-hero-px-aurora span, .az-hero-px-rail-track, .az-hero-px-rail-tick, .az-hero-px-eyebrow::before { animation: none !important; } .az-hero-px h1 { visibility: visible; } } /* ═════════════════════════════════════════════════════════════════════════ ZOOM PARALLAX (replaces .az-story — reference 21st.dev/sshahaider) Pinned section, 400vh of scroll, 7 tiles that all scale 1 → --zoom in parallel. Centre tile zooms hardest so it fills the screen at the end. ═════════════════════════════════════════════════════════════════════════ */ .az-zoom { position: relative; height: 400vh; background: #000; } .az-zoom-stage { position: relative; height: 100vh; width: 100%; overflow: hidden; background: radial-gradient(ellipse 80% 50% at 50% 30%, rgba(255, 215, 0, 0.06), transparent 70%), #000; } /* Captions stack — only one is visible at a time */ .az-zoom-captions { position: absolute; top: 8vh; left: 50%; transform: translateX(-50%); z-index: 30; width: min(880px, 92%); pointer-events: none; } .az-zoom-caption { position: absolute; top: 0; left: 0; right: 0; margin: 0; text-align: center; font-size: clamp(28px, 4.4vw, 56px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; color: rgba(245, 245, 245, 0.96); text-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); opacity: 0; } /* Grid container — 3×3 conceptually, 7 tiles. Each tile is absolutely positioned and zooms from its own origin. */ .az-zoom-grid { position: absolute; inset: 0; z-index: 10; } .az-zoom-tile { position: absolute; transform-origin: 50% 50%; will-change: transform; } /* Tile positions on viewport. GSAP composes xPercent/yPercent (set in initZoomParallax) with `scale` into a single transform string, so we keep all centring out of CSS — the JS sees plain left/top/width/height and adds the centring translate as part of the same transform. */ .az-zoom-t1 { width: 280px; height: 180px; left: 10%; top: 18%; transform-origin: 30% 30%; } .az-zoom-t2 { width: 380px; height: 320px; left: 50%; top: 22%; transform-origin: 50% 0%; } .az-zoom-t3 { width: 220px; height: 220px; right: 12%; top: 22%; transform-origin: 70% 30%; } .az-zoom-t4 { width: 280px; height: 280px; left: 50%; top: 50%; transform-origin: 50% 50%; z-index: 12; } .az-zoom-t5 { width: 220px; height: 220px; left: 8%; bottom: 18%; transform-origin: 30% 70%; } .az-zoom-t6 { width: 360px; height: 280px; left: 50%; bottom: 10%; transform-origin: 50% 100%; } .az-zoom-t7 { width: 280px; height: 240px; right: 10%; bottom: 18%; transform-origin: 70% 70%; } .az-zoom-card { position: relative; width: 100%; height: 100%; background: rgba(20, 20, 20, 0.72); border: 1px solid rgba(255, 215, 0, 0.12); border-radius: 16px; padding: 16px; backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.04); color: rgba(245, 245, 245, 0.92); font-size: 12px; overflow: hidden; display: flex; flex-direction: column; gap: 10px; } .az-zoom-card-head { display: flex; align-items: center; gap: 10px; } .az-zoom-card-dot { width: 8px; height: 8px; background: #4ade80; border-radius: 50%; box-shadow: 0 0 8px rgba(74, 222, 128, 0.7); } .az-zoom-card-mark { width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; } .az-zoom-card-mark img { width: 20px; height: 20px; } .az-zoom-card-title { font-weight: 700; font-size: 13px; letter-spacing: 0.02em; } .az-zoom-card-sub { color: rgba(160, 160, 160, 0.85); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; } .az-zoom-card-big { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .az-zoom-card-pill { align-self: flex-start; font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 999px; background: rgba(74, 222, 128, 0.12); color: #4ade80; } .az-zoom-card-pill.up { background: rgba(74, 222, 128, 0.12); color: #4ade80; } .az-zoom-card-pill.dn { background: rgba(239, 83, 80, 0.12); color: #ef5350; } .az-zoom-card-row { display: flex; justify-content: space-between; align-items: center; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; } .az-zoom-card-row:first-of-type { border-top: 0; } .az-zoom-card-row span { color: rgba(160, 160, 160, 0.85); } .az-zoom-card-row b { font-weight: 700; } .az-zoom-card-row .hf-safe { color: #4ade80; } .az-zoom-card-spark { display: block; width: 100%; margin-top: auto; } /* Centre hero tile — big floating ETH token */ .az-zoom-card-hero { position: relative; background: radial-gradient(circle at 50% 50%, rgba(255, 215, 0, 0.08), rgba(20, 20, 20, 0.85) 60%); border-color: rgba(255, 215, 0, 0.22); display: grid; place-items: center; padding: 0; } .az-zoom-hero-ring { position: absolute; inset: 16px; border: 1px solid rgba(255, 215, 0, 0.25); border-radius: 12px; box-shadow: inset 0 0 60px rgba(255, 215, 0, 0.05); animation: az-zoom-hero-ring 3.6s ease-in-out infinite; } @keyframes az-zoom-hero-ring { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(0.94); opacity: 1; } } .az-zoom-hero-img { width: 64%; height: auto; filter: drop-shadow(0 12px 32px rgba(255, 215, 0, 0.25)); position: relative; z-index: 1; } .az-zoom-hero-label { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(255, 215, 0, 0.85); font-weight: 700; } /* Token tile — square card with logo + symbol/price */ .az-zoom-card-token { display: grid; grid-template-rows: 1fr auto; gap: 6px; padding: 14px; } .az-zoom-token-img { width: 60%; height: auto; align-self: center; justify-self: center; filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5)); } .az-zoom-token-info { text-align: center; } .az-zoom-token-symbol { font-weight: 800; font-size: 14px; letter-spacing: 0.04em; } .az-zoom-token-price { color: rgba(160, 160, 160, 0.85); font-size: 11px; font-variant-numeric: tabular-nums; } /* Gauge tile — risk monitor: header / arc + readout / stat row */ .az-zoom-card-gauge { display: grid; grid-template-rows: auto 1fr auto; gap: 10px; padding: 14px 16px; background: linear-gradient(180deg, #080808 0%, #020202 100%); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04); } .az-zoom-gauge-head { display: flex; justify-content: space-between; align-items: center; } .az-zoom-gauge-tag { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(180, 180, 180, 0.72); font-weight: 600; } .az-zoom-gauge-status { padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; } .az-zoom-gauge-status.hf-safe { color: #4ade80; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.32); } .az-zoom-gauge-body { position: relative; display: flex; align-items: stretch; justify-content: center; } .az-zoom-gauge-arc { width: 100%; height: auto; max-height: 150px; display: block; } .az-zoom-gauge-readout { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; flex-direction: column; align-items: center; pointer-events: none; } .az-zoom-gauge-value { font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; color: #4ade80; font-variant-numeric: tabular-nums; text-shadow: 0 0 24px rgba(74, 222, 128, 0.35); } .az-zoom-gauge-label { font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(180, 180, 180, 0.78); margin-top: 4px; } .az-zoom-gauge-stats { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); } .az-zoom-gauge-stat { display: flex; flex-direction: column; gap: 2px; flex: 1; } .az-zoom-gauge-stat:last-of-type { align-items: flex-end; } .az-zoom-gauge-stat-label { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(160, 160, 160, 0.7); } .az-zoom-gauge-stat-value { font-size: 14px; font-weight: 600; color: rgba(245, 245, 245, 0.96); font-variant-numeric: tabular-nums; } .az-zoom-gauge-stat-sep { width: 1px; height: 24px; background: rgba(255, 255, 255, 0.08); } /* Stack tile — list of protocols with amount */ .az-zoom-card-stack { gap: 6px; } .az-zoom-stack-row { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; border-top: 1px solid rgba(255, 255, 255, 0.05); font-variant-numeric: tabular-nums; } .az-zoom-stack-row:first-of-type { border-top: 0; } .az-zoom-stack-row img { width: 18px; height: 18px; border-radius: 4px; } .az-zoom-stack-row span { color: rgba(245, 245, 245, 0.88); } .az-zoom-stack-row b { color: var(--az-gold); } /* Lend tile — Aave variant */ .az-zoom-card-lend { gap: 6px; } .az-zoom-card-dash { gap: 6px; } /* Mobile — smaller tiles, less aggressive zooms (CSS doesn't change the --zoom var, JS reads it. We scale the *positions* and base sizes down here so the staggered layout still fits on a phone). */ @media (max-width: 760px) { .az-zoom-t1 { width: 160px; height: 100px; left: 4%; top: 14%; } .az-zoom-t2 { width: 200px; height: 120px; left: 50%; top: 8%; } .az-zoom-t3 { width: 130px; height: 130px; right: 4%; top: 18%; } .az-zoom-t4 { width: 160px; height: 160px; } .az-zoom-t5 { width: 130px; height: 130px; left: 4%; bottom: 14%; } .az-zoom-t6 { width: 220px; height: 200px; bottom: 8%; } .az-zoom-t7 { width: 160px; height: 140px; right: 4%; bottom: 14%; } .az-zoom-caption { font-size: clamp(20px, 6vw, 32px); } } /* Reduced motion — render a static showcase, no pin/scrub */ @media (prefers-reduced-motion: reduce) { .az-zoom { height: auto; min-height: 100vh; } .az-zoom-stage { height: auto; min-height: 100vh; } .az-zoom-caption { position: relative; opacity: 1; } .az-zoom-caption + .az-zoom-caption { display: none; } } /* ─── Zoom-parallax final reveal — editorial typography ────────────── Apple-keynote close. No rings, no badge — the words are the visual. tag → gold hairline → massive headline → gold hairline → CTA. */ .az-zoom-final { position: absolute; left: 50%; top: 50%; z-index: 40; width: min(880px, 92vw); pointer-events: none; opacity: 0; text-align: center; } @media (prefers-reduced-motion: reduce) { .az-zoom-final { opacity: 1; } } /* ═════════════════════════════════════════════════════════════════════════ HERO — primary/secondary actions + trust strip (replaces the wallet-tracker pill from the previous iteration) ═════════════════════════════════════════════════════════════════════════ */ .az-hero-px-actions { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 8px; } .az-hero-px-action-primary { display: inline-flex; align-items: center; gap: 10px; padding: 14px 28px; border-radius: 999px; background: #0a0a0a; color: #FFD700; -webkit-text-fill-color: #FFD700; font-weight: 800; font-size: 15px; letter-spacing: 0.03em; text-decoration: none; border: 1.5px solid rgba(255, 215, 0, 0.55); box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.08), 0 14px 36px rgba(255, 215, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.4), inset 0 0 22px rgba(255, 215, 0, 0.08); transition: transform 240ms cubic-bezier(.2,.6,.2,1), box-shadow 240ms ease, border-color 240ms ease, color 240ms ease; position: relative; overflow: hidden; isolation: isolate; } .az-hero-px-action-primary::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 0%, rgba(255, 215, 0, 0.22) 50%, transparent 100%); transform: translateX(-110%); transition: transform 800ms cubic-bezier(.2,.6,.2,1); z-index: -1; } .az-hero-px-action-primary:hover { color: #FFE14D; -webkit-text-fill-color: #FFE14D; border-color: rgba(255, 215, 0, 0.85); transform: translateY(-2px) scale(1.02); box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.14), 0 20px 48px rgba(255, 215, 0, 0.34), 0 4px 10px rgba(0, 0, 0, 0.4), inset 0 0 32px rgba(255, 215, 0, 0.16); } .az-hero-px-action-primary:hover::after { transform: translateX(110%); } .az-hero-px-action-primary svg { transition: transform 240ms cubic-bezier(.2,.6,.2,1); } .az-hero-px-action-primary:hover svg { transform: translateX(4px); } .az-hero-px-action-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: rgba(245, 245, 245, 0.78); font-weight: 500; font-size: 13px; letter-spacing: 0.02em; text-decoration: none; transition: color 220ms ease, background 220ms ease, border-color 220ms ease; } .az-hero-px-action-secondary:hover { color: var(--az-gold); background: rgba(255, 215, 0, 0.04); border-color: rgba(255, 215, 0, 0.2); } .az-hero-px-action-secondary svg { transition: transform 240ms cubic-bezier(.2,.6,.2,1); } .az-hero-px-action-secondary:hover svg { transform: translateY(2px); } .az-hero-px-trust { list-style: none; margin: 12px 0 0; padding: 14px 28px; display: inline-flex; align-items: center; gap: 22px; border-radius: 16px; background: rgba(20, 20, 20, 0.55); border: 1px solid rgba(255, 255, 255, 0.06); backdrop-filter: blur(10px); } .az-hero-px-trust > li { display: inline-flex; flex-direction: column; align-items: center; gap: 2px; } .az-hero-px-trust-divider { width: 1px; align-self: stretch; background: rgba(255, 255, 255, 0.08); margin: 4px 0; } .az-hero-px-trust-num { font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--az-gold); letter-spacing: -0.02em; } .az-hero-px-trust-cap { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(160, 160, 160, 0.85); } /* ═════════════════════════════════════════════════════════════════════════ ZOOM-PARALLAX — scene-based choreography polish Captions sit at top: 6vh (was 8vh) and the focus tile lives in the lower half of the stage (translateY ~+8% from centre). They never overlap. ═════════════════════════════════════════════════════════════════════════ */ .az-zoom-captions { top: 6vh !important; } .az-zoom-caption { font-size: clamp(24px, 3.6vw, 48px) !important; } /* Focus tile gets a soft golden glow during its scene (added via inline GSAP attributes — this rule provides the boost via filter on tile content when its inline opacity hits 1). */ .az-zoom-tile { will-change: transform, opacity, filter; } /* Hide the legacy ETH centre tile (t4) — it's now redundant: the scene focus tiles do the spotlight, and the brand reveal closes. Keeping the tile in DOM for layout symmetry but visually removing it. */ .az-zoom-tile.az-zoom-t4 { opacity: 0; pointer-events: none; } /* ─── Final reveal — editorial composition (Apple-keynote close) ───── No rings, no badge, no medallion frame. The headline is the visual: eyebrow ─── thin gold hairline ─── MASSIVE HEADLINE (white + gold accent) ─── thin gold hairline ─── CTA A very soft gold halo sits behind the title — reads as warm light from off-screen, not as a decorative shape. */ .az-zoom-final-content { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: clamp(22px, 2.2vw, 32px); pointer-events: auto; } .az-zoom-final-tag { font-size: clamp(11px, 0.9vw, 13px); letter-spacing: 0.44em; text-transform: uppercase; color: rgba(255, 215, 0, 0.82); font-weight: 700; padding-left: 0.44em; /* compensate trailing letter-spacing for centre */ } /* Hairline divider — very thin gold gradient with soft fades at both ends. Width scales with viewport but never dominates. */ .az-zoom-final-rule { display: block; width: clamp(160px, 22vw, 280px); height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(255, 215, 0, 0.55) 50%, transparent 100%); } .az-zoom-final-title { margin: 0; font-size: clamp(40px, 6.8vw, 96px); font-weight: 800; line-height: 0.98; letter-spacing: -0.035em; color: #F5F5F5; } .az-zoom-final-title > span { display: block; } .az-zoom-final-title .az-glava-accent { background: var(--az-gold-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .az-zoom-final-cta { display: inline-flex; align-items: center; gap: 10px; padding: 16px 36px; border-radius: 999px; background: #0a0a0a; color: #FFD700; -webkit-text-fill-color: #FFD700; font-weight: 800; font-size: 15px; letter-spacing: 0.03em; text-decoration: none; border: 1.5px solid rgba(255, 215, 0, 0.55); box-shadow: 0 0 0 4px rgba(255, 215, 0, 0.08), 0 16px 40px rgba(255, 215, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.45), inset 0 0 22px rgba(255, 215, 0, 0.08); transition: transform 240ms cubic-bezier(.2,.6,.2,1), box-shadow 240ms ease, border-color 240ms ease, color 240ms ease; } .az-zoom-final-cta:hover { color: #FFE14D; -webkit-text-fill-color: #FFE14D; border-color: rgba(255, 215, 0, 0.85); transform: translateY(-2px) scale(1.03); box-shadow: 0 0 0 5px rgba(255, 215, 0, 0.14), 0 24px 56px rgba(255, 215, 0, 0.34), 0 4px 10px rgba(0, 0, 0, 0.45), inset 0 0 32px rgba(255, 215, 0, 0.16); } .az-zoom-final-cta svg { transition: transform 240ms cubic-bezier(.2,.6,.2,1); } .az-zoom-final-cta:hover svg { transform: translateX(4px); } /* Halo — very soft, very large, very low opacity. Sits behind the title to give a sense of warm ambient light, not a defined shape. */ .az-zoom-final-halo { position: absolute; left: 50%; top: 50%; width: clamp(420px, 60vw, 820px); height: clamp(280px, 36vw, 480px); transform: translate(-50%, -50%); z-index: 1; background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(255, 215, 0, 0.10) 0%, rgba(255, 215, 0, 0.04) 40%, transparent 75%); filter: blur(22px); pointer-events: none; animation: az-zoom-halo-breath 7s ease-in-out infinite; } @keyframes az-zoom-halo-breath { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .az-zoom-final-halo { animation: none !important; } } @media (max-width: 760px) { .az-zoom-final { width: min(92vw, 420px); } .az-zoom-final-content { gap: 18px; } .az-zoom-final-title { font-size: clamp(34px, 10vw, 52px); } .az-zoom-final-rule { width: 140px; } } /* ─── Zoom-parallax: refined lending-position tile (scene 2) ───────── Mirrors the real `az-lending-card` from the user dashboard. Subtle gold accents, glass panel, dividers, asset rows with token logo + amount + APY. */ .az-zoom-card-lend { padding: 16px 18px; gap: 12px; background: linear-gradient(180deg, #080808 0%, #020202 100%); border: 1px solid rgba(255, 215, 0, 0.16); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* Header — protocol mark · name + sub · gold market badge */ .az-zoom-lend-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; } .az-zoom-lend-mark { width: 38px; height: 38px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } .az-zoom-lend-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } .az-zoom-lend-id { min-width: 0; } .az-zoom-lend-name { font-weight: 700; font-size: 14px; letter-spacing: 0.01em; color: #F5F5F5; } .az-zoom-lend-sub { font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(160, 160, 160, 0.85); margin-top: 2px; } .az-zoom-lend-badge { font-size: 9px; font-weight: 700; letter-spacing: 0.08em; padding: 4px 10px; border-radius: 999px; background: rgba(255, 215, 0, 0.10); color: var(--az-gold); border: 1px solid rgba(255, 215, 0, 0.28); } /* Net worth row — label/value stack on left, HF pill on right */ .az-zoom-lend-net { display: flex; justify-content: space-between; align-items: flex-end; padding: 4px 0 8px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .az-zoom-lend-net-stack { display: flex; flex-direction: column; gap: 2px; } .az-zoom-lend-net-label { font-size: 10px; letter-spacing: 0.10em; text-transform: uppercase; color: rgba(160, 160, 160, 0.85); } .az-zoom-lend-net-value { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: #F5F5F5; line-height: 1; } .az-zoom-lend-hf { font-size: 11px; font-weight: 700; padding: 4px 9px; border-radius: 999px; background: rgba(74, 222, 128, 0.12); border: 1px solid rgba(74, 222, 128, 0.28); color: #4ade80; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; } /* Sections — supply / borrow with single asset row each */ .az-zoom-lend-section { display: flex; flex-direction: column; gap: 4px; } .az-zoom-lend-section-head { font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(160, 160, 160, 0.8); } .az-zoom-lend-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 6px 0; font-variant-numeric: tabular-nums; } .az-zoom-lend-asset { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; color: #F5F5F5; } .az-zoom-lend-asset img { width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; } .az-zoom-lend-amt { font-weight: 600; font-size: 13px; color: rgba(245, 245, 245, 0.9); } .az-zoom-lend-apy { font-weight: 700; font-size: 12px; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.02em; } .az-zoom-lend-apy.up { background: rgba(74, 222, 128, 0.12); color: #4ade80; } .az-zoom-lend-apy.dn { background: rgba(239, 83, 80, 0.12); color: #ef5350; } /* ═══════════════════════════════════════════════════════════════════════════ RESPONSIVE — tablet + mobile adaptation ═══════════════════════════════════════════════════════════════════════════ Strategy: • ≤ 1024px — switch every .az-glava from 2-col grid to 1-col stack, drop the 100vh min-height (content height drives section), reduce padding, scale paragraph + heading typography. • ≤ 768px — hide hero side decorations (rails / orbs / floating cards which fight for narrow space and overlap the headline); compress feature grids to a single column where they can't go denser; hide the desktop-cinematic zoom-story (its content is already surfaced in glava-1/2/3/4 below it — no info lost on mobile). • ≤ 480px — last-mile tightening: padding, font-size, button sizing. Kept the original max-width: 1100/880/768/600/640/760 rules intact — this block layers on top of them. */ /* ─── Tablet landscape + smaller (≤ 1024px) ─── */ @media (max-width: 1024px) { /* Every glava block: stack content over visual, remove forced 100vh */ .az-glava { grid-template-columns: 1fr; min-height: auto; gap: clamp(32px, 5vw, 56px); padding: clamp(48px, 8vw, 96px) clamp(24px, 5vw, 64px); } .az-glava-content { max-width: 720px; width: 100%; margin: 0 auto; text-align: left; } .az-glava h2 { font-size: clamp(32px, 7vw, 64px); } .az-glava-content > p { max-width: 60ch; font-size: clamp(15px, 1.8vw, 17px); } /* Visual side: drop aspect-ratio 1 (was for centred 560px square), let inner card pick its own height. Centre it horizontally below text. Force content first then visual on every glava regardless of DOM order — natural reading flow on narrow screens is "describe it, then show the demo", and glava-2/glava-4 have visual-first DOM for desktop symmetry which inverts on a single-column stack. */ .az-glava-content { order: 0; } .az-glava-visual { aspect-ratio: auto; max-width: 720px; justify-self: stretch; margin: 0 auto; width: 100%; order: 1; } /* Hero: shrink headline + tighten internal spacing */ .az-hero-px h1 { font-size: clamp(40px, 8vw, 72px); } .az-hero-px-sub { font-size: clamp(15px, 2vw, 18px); } .az-hero-px-rail { display: none; } /* rails compete with hero copy at narrow widths */ /* Detail-reveal: tighter stat strip — value font-size smaller */ .az-detail-stat-value { font-size: clamp(28px, 6vw, 42px); } .az-detail-reveal-inner { gap: 40px; } /* Bigger paste-demo card on tablet (it sits under text now, full width) */ .az-paste-demo { max-width: 640px; margin: 0 auto; } /* Zoom-story — desktop-cinematic only. Pinned 4× viewport height with nested xPercent/yPercent transforms feels janky on tablet pointer + scroll. Content surfaces in the glava blocks below anyway. */ .az-zoom { display: none; } /* Marquee — drop the gold bottom-border so it doesn't visually merge with the paste-demo card border that follows. Padding stays default. */ .az-marquee-section { border-bottom: none; } /* Disable the view-timeline parallax that translates visuals by up to -80px on scroll. On desktop the negative translate is a cinematic float; on tablet/mobile it makes the paste-demo visually overlap the chain-logo marquee above it. Strip the animation + reset transform. */ @supports (animation-timeline: view()) { .az-glava, .az-glava-content > *, .az-glava-visual { animation: none; transform: none; opacity: 1; } } } /* ─── Tablet portrait + small tablet (≤ 768px) ─── */ @media (max-width: 768px) { /* Hero — full mobile makeover */ .az-hero-px { padding-left: 16px; padding-right: 16px; } .az-hero-px h1 { font-size: clamp(36px, 9vw, 56px); line-height: 1.04; } .az-hero-px-orbs { display: none; } /* scattered chain logos clash with text */ .az-hero-px-card-left, .az-hero-px-card-right { display: none; } /* floating cards crash into headline */ .az-hero-px-tracker { display: none; } /* compact ticker — hidden on mobile */ .az-hero-px-inner { padding: 0 12px; gap: 18px; } .az-hero-px-trust { flex-direction: column; align-items: center; gap: 14px; text-align: center; } .az-hero-px-trust-divider { display: none; } .az-hero-px-actions { flex-direction: column; align-items: stretch; gap: 12px; } .az-hero-px-action-primary, .az-hero-px-action-secondary { justify-content: center; } /* Glava blocks — tighten further */ .az-glava { padding: 48px 16px; gap: 36px; } .az-glava h2 { font-size: clamp(30px, 8vw, 44px); } .az-glava-index { font-size: 11px; letter-spacing: 0.24em; } /* Paste-demo — fit mobile */ .az-paste-demo { padding: 16px; } .az-paste-demo-input-field { font-size: 11px; padding: 6px 9px; min-height: 32px; } .az-paste-demo-balance { padding: 9px 10px; } .az-paste-demo-balance-icon { width: 24px; height: 24px; } .az-paste-demo-balance-symbol { font-size: 12px; } .az-paste-demo-balance-usd { font-size: 12px; } .az-paste-demo-total-value { font-size: 22px; } .az-paste-demo-chrome-title { display: none; } /* chrome bar shrinks — drop subtitle text */ /* Reserve room for the tallest scenario (4 rows on mobile ≈ 252px measured). Slight overshoot is fine — prevents page jump on cycle. */ .az-paste-demo-balances { min-height: 260px; } /* Detail-reveal stat strip — drop dividers, stack 2x2 */ .az-detail-stats { grid-template-columns: 1fr 1fr; padding: 18px 0; } .az-detail-stat { border-right: none; padding: 12px; } .az-detail-stat-value { font-size: clamp(28px, 8vw, 40px); } /* Detail-reveal cards — 1 col, smaller card padding */ .az-detail-grid { grid-template-columns: 1fr; gap: 16px; } .az-detail-card { padding: 20px; } .az-detail-card p { font-size: 13.5px; max-width: none; } /* Final CTA */ .az-final-cta { padding: 64px 16px; } .az-final-cta h2 { font-size: clamp(36px, 9vw, 56px); } .az-final-cta .az-landing-cta { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; margin: 0 auto; } .az-final-cta .btn-primary, .az-final-cta .btn-secondary { text-align: center; justify-content: center; } /* Marquee logo size on mobile (padding lives in the ≤1024px rule above) */ .az-marquee-item { width: 36px; height: 36px; } /* Footer — vertical stack */ .az-footer-top { grid-template-columns: 1fr 1fr; gap: 28px; } .az-footer-brand-block { grid-column: 1 / -1; max-width: none; } .az-landing-footer { padding: 48px 16px 24px; } } /* ─── Lending / RWA / Risk visuals — relax max-width on narrow viewports ─── */ @media (max-width: 1024px) { /* Visuals already use flex/grid internally — just relax their max-width caps so they stretch to fill the single column. NO broad width:100% on descendants — that breaks fixed-size icon containers (.az-protocol-mark, .az-protocol-chain-badge etc.) which must keep their pixel dimensions. */ .az-glava-visual-lending, .az-glava-visual-xstocks, .az-glava-visual-risk, .az-glava-visual-demo { max-width: 720px; } /* Disable JS-driven opacity:0 reveals on narrow viewports. The fade-in only feels right at desktop pacing — on tablet/mobile users scroll fast through the stack and the delayed reveal just looks like content hasn't loaded. Show everything upfront. */ .az-js .az-glava-content > *, .az-js .az-glava-visual, .az-js .az-protocol-card, .az-js .az-rwa-card, .az-js .az-risk-card, .az-js .az-detail-card, .az-js .az-detail-stat, .az-js .az-final-cta > *, .az-js .az-landing-footer { opacity: 1; } } /* ─── RWA grid — 2 cols desktop+tablet → 1 col mobile ─── */ @media (max-width: 480px) { .az-rwa-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { /* Lending summary chips wrap; protocol grid is flex column already */ .az-lending-summary { flex-wrap: wrap; gap: 12px; } .az-lending-summary-sep { display: none; } } /* ─── Mobile fine-tuning (≤ 480px) ─── */ @media (max-width: 480px) { .az-hero-px h1 { font-size: clamp(32px, 10vw, 48px); } .az-hero-px-sub { font-size: 14px; padding: 0 8px; } .az-hero-px-eyebrow { font-size: 10px; letter-spacing: 0.16em; } .az-glava h2 { font-size: clamp(28px, 9vw, 38px); } .az-glava-content > p { font-size: 14px; } .az-glava { padding: 40px 14px; } .az-paste-demo { padding: 14px; border-radius: 18px; } .az-paste-demo-input-field { font-size: 10.5px; word-break: break-all; } .az-paste-demo-total-value { font-size: 20px; } .az-paste-demo-footer { font-size: 9px; } .az-detail-reveal h2 { font-size: clamp(30px, 9vw, 44px); } .az-detail-reveal { padding: 48px 14px; } .az-detail-stats { grid-template-columns: 1fr 1fr; } .az-final-cta h2 { font-size: clamp(30px, 10vw, 42px); } .az-final-cta { padding: 56px 14px; } .az-footer-top { grid-template-columns: 1fr; gap: 24px; } }