/* ============================================================ RevOnChain — Liquid glass / chrome fintech redesign ============================================================ */ :root { --accent-h: 224; --accent-c: 0.18; --accent: oklch(0.58 var(--accent-c) var(--accent-h)); --accent-2: oklch(0.72 calc(var(--accent-c) * 0.7) calc(var(--accent-h) + 30)); --accent-soft: oklch(0.92 calc(var(--accent-c) * 0.3) var(--accent-h)); --accent-deep: oklch(0.38 var(--accent-c) var(--accent-h)); /* Light base (default) */ --bg: #f4f6fb; --bg-2: #eaeef6; --bg-3: #ffffff; --ink: #0b1220; --ink-2: #1f2a3c; --muted: #5a6678; --muted-2: #8792a4; --line: rgba(11, 18, 32, 0.08); --line-strong: rgba(11, 18, 32, 0.18); --glass-bg: rgba(255, 255, 255, 0.55); --glass-stroke: rgba(255, 255, 255, 0.9); --glass-shadow: 0 30px 80px -30px rgba(18, 32, 64, 0.22), 0 8px 24px -8px rgba(18, 32, 64, 0.12); --glass-i: 0.7; --parallax-k: 1; --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --max: 1240px; --pad: clamp(20px, 4vw, 56px); --t-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --t-sans: "Inter", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif; } [data-bg="tint"] { --bg: #eaf0fb; --bg-2: #dde6f6; --bg-3: #f7faff; } [data-bg="dark"] { --bg: #0a0f1a; --bg-2: #0f1726; --bg-3: #131b2c; --ink: #eef3fb; --ink-2: #c8d3e6; --muted: #8795ad; --muted-2: #5c6a82; --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.16); --glass-bg: rgba(255, 255, 255, 0.04); --glass-stroke: rgba(255, 255, 255, 0.14); --glass-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.6), 0 8px 24px -8px rgba(0, 0, 0, 0.4); } * { margin: 0; padding: 0; box-sizing: border-box; } /* Background lives on only: body must stay transparent so the fixed .bg-field and other negative-z-index visuals (hero orb) can paint. */ html { background: var(--bg); } body { background: transparent; } html, body { color: var(--ink); } html { scroll-behavior: smooth; } body { font-family: var(--t-sans); font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; line-height: 1.5; position: relative; min-height: 100dvh; } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } /* ------------------------------------------------------------ Background field (global parallax canvas) ------------------------------------------------------------ */ .bg-field { position: fixed; inset: -10vh -10vw; z-index: -1; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, var(--bg-3), transparent 60%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); } .bg-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px); background-size: 72px 72px; mask-image: radial-gradient(ellipse 60% 60% at 50% 40%, black 40%, transparent 80%); opacity: 0.7; } .bg-orb { position: absolute; border-radius: 50%; filter: blur(70px); will-change: transform; opacity: calc(var(--glass-i) * 0.9); } .bg-orb--a { width: 56vw; height: 56vw; left: -14vw; top: -6vw; background: radial-gradient(circle, var(--accent-soft), transparent 65%); } .bg-orb--b { width: 48vw; height: 48vw; right: -14vw; top: 30vh; background: radial-gradient(circle, oklch(0.9 0.08 calc(var(--accent-h) + 40)), transparent 65%); } .bg-orb--c { width: 64vw; height: 64vw; left: 10vw; top: 120vh; background: radial-gradient(circle, oklch(0.92 0.05 calc(var(--accent-h) - 40)), transparent 65%); } .bg-orb--d { width: 46vw; height: 46vw; right: -10vw; top: 240vh; background: radial-gradient(circle, var(--accent-soft), transparent 65%); } [data-bg="dark"] .bg-orb { opacity: calc(var(--glass-i) * 0.45); mix-blend-mode: screen; } [data-bg="dark"] .bg-orb--a { background: radial-gradient(circle, var(--accent), transparent 60%); } [data-bg="dark"] .bg-orb--b { background: radial-gradient(circle, oklch(0.55 0.18 calc(var(--accent-h) + 50)), transparent 60%); } .bg-noise { position: absolute; inset: 0; pointer-events: none; opacity: 0.06; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 180px 180px; } body.no-grain .bg-noise { display: none; } /* ------------------------------------------------------------ Typography + shared utilities ------------------------------------------------------------ */ .h-display { font-family: var(--t-sans); font-weight: 500; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(2.4rem, 5.2vw, 4.4rem); text-wrap: balance; } .h-display em { font-style: normal; font-weight: 500; background: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 40%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .body-col { max-width: 34rem; color: var(--muted); font-weight: 400; font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.65; display: flex; flex-direction: column; gap: 1rem; } [data-bg="dark"] .body-col { color: var(--ink-2); } .sec-label { font-family: var(--t-mono); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); display: inline-flex; align-items: center; gap: 0.75rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); } .sec-label i { font-style: normal; color: var(--accent); font-weight: 500; } .sec-label::before { content: ""; width: 28px; height: 1px; background: var(--line-strong); } .sec-label--center { justify-content: center; width: 100%; } .pulse-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.25), 0 0 12px oklch(from var(--accent) l c h / 0.7); animation: pulse 2.4s ease-in-out infinite; flex-shrink: 0; } .pulse-dot--sm { width: 6px; height: 6px; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 0.9; } 50% { transform: scale(1.2); opacity: 1; } } /* ------------------------------------------------------------ Glass card base ------------------------------------------------------------ */ .glass-card, .opp-card, .stat-card, .chrome, .loop, .tweaks { position: relative; background: var(--glass-bg); backdrop-filter: blur(calc(18px * var(--glass-i))) saturate(140%); -webkit-backdrop-filter: blur(calc(18px * var(--glass-i))) saturate(140%); border: 1px solid var(--glass-stroke); border-radius: 22px; box-shadow: var(--glass-shadow); overflow: hidden; } .glass-card::before, .opp-card::before, .stat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, calc(0.4 * var(--glass-i))) 0%, transparent 40%), linear-gradient(0deg, rgba(255, 255, 255, calc(0.15 * var(--glass-i))) 0%, transparent 30%); mix-blend-mode: overlay; } /* ------------------------------------------------------------ Buttons ------------------------------------------------------------ */ .btn { position: relative; display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.9rem 1.4rem; border-radius: 999px; font-weight: 500; font-size: 0.9rem; letter-spacing: -0.01em; transition: transform 0.4s var(--ease), background 0.3s var(--ease), border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), color 0.3s var(--ease); isolation: isolate; white-space: nowrap; } .btn__arrow { display: inline-block; transition: transform 0.4s var(--ease); } .btn:hover .btn__arrow { transform: translate(3px, -1px); } .btn--sm { padding: 0.6rem 1rem; font-size: 0.82rem; } .btn--lg { padding: 1.1rem 2rem; font-size: 1rem; } .btn--primary { background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--bg); box-shadow: 0 10px 30px -10px oklch(from var(--accent) l c h / 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15); border: 1px solid oklch(from var(--ink) l c h / 0.8); } .btn--primary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(160deg, var(--accent) 0%, var(--accent-2) 100%); opacity: 0; transition: opacity 0.4s var(--ease); z-index: -1; } .btn--primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px oklch(from var(--accent) l c h / 0.6); } .btn--primary:hover::after { opacity: 1; } [data-bg="dark"] .btn--primary { background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--bg-2); } .btn--ghost { background: var(--glass-bg); color: var(--ink); border: 1px solid var(--line-strong); backdrop-filter: blur(12px); } .btn--ghost:hover { border-color: var(--accent); color: var(--accent-deep); transform: translateY(-2px); } [data-bg="dark"] .btn--ghost:hover { color: var(--accent); } /* ------------------------------------------------------------ Logo mark ------------------------------------------------------------ */ .logo-mark { position: relative; width: 22px; height: 22px; display: inline-block; } .logo-mark__ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px solid var(--ink); box-sizing: border-box; } .logo-mark__ring::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; border: 1.5px solid var(--accent); clip-path: polygon(0 0, 55% 0, 55% 100%, 0 100%); box-sizing: border-box; } .logo-mark__dot { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); transform: translate(-50%, -50%); box-shadow: 0 0 10px var(--accent); } /* ------------------------------------------------------------ Nav ------------------------------------------------------------ */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px var(--pad); transition: padding 0.3s var(--ease); } .nav__inner { max-width: var(--max); margin: 0 auto; padding: 10px 14px 10px 22px; background: var(--glass-bg); backdrop-filter: blur(calc(14px * var(--glass-i))) saturate(150%); -webkit-backdrop-filter: blur(calc(14px * var(--glass-i))) saturate(150%); border: 1px solid var(--glass-stroke); border-radius: 999px; box-shadow: var(--glass-shadow); display: flex; align-items: center; justify-content: space-between; gap: 16px; transition: box-shadow 0.3s var(--ease), transform 0.3s var(--ease); } .nav.scrolled .nav__inner { box-shadow: 0 20px 50px -20px rgba(18, 32, 64, 0.25), 0 6px 16px -6px rgba(18, 32, 64, 0.12); } .nav__logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; font-size: 1rem; } .nav__links { display: flex; gap: 6px; flex: 1; justify-content: center; } .nav__link { font-size: 0.82rem; font-weight: 500; color: var(--muted); padding: 8px 12px; border-radius: 999px; transition: color 0.3s var(--ease), background 0.3s var(--ease); display: inline-flex; align-items: center; gap: 6px; } .nav__link i { font-family: var(--t-mono); font-style: normal; font-size: 0.66rem; color: var(--muted-2); letter-spacing: 0.1em; } .nav__link:hover { color: var(--ink); background: oklch(from var(--accent) l c h / 0.08); } .nav__link:hover i { color: var(--accent); } @media (max-width: 900px) { .nav__links { display: none; } .nav__inner { padding: 8px 12px 8px 18px; } } /* ------------------------------------------------------------ HERO ------------------------------------------------------------ */ .hero { position: relative; min-height: 100dvh; padding: 140px var(--pad) 80px; display: flex; align-items: center; } .hero__inner { max-width: var(--max); margin: 0 auto; width: 100%; position: relative; display: grid; grid-template-columns: 1fr; gap: 2rem; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 10px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-stroke); backdrop-filter: blur(calc(14px * var(--glass-i))); font-family: var(--t-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); width: fit-content; box-shadow: 0 4px 18px -6px rgba(18, 32, 64, 0.1); } .hero__title { font-family: var(--t-sans); font-weight: 500; letter-spacing: -0.045em; line-height: 0.93; font-size: clamp(3rem, 9vw, 7.5rem); position: relative; max-width: 14ch; text-wrap: balance; } .hero__line { display: block; position: relative; } .hero__line--accent { position: relative; display: inline-block; } .hero__line--accent em { font-style: normal; background: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 50%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__underline { position: absolute; bottom: -0.05em; left: 0; width: 100%; height: 0.18em; color: var(--accent); opacity: 0.55; stroke-dasharray: 400; stroke-dashoffset: 400; animation: draw 1.6s var(--ease-out) 1.4s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .hero__lede { max-width: 30rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); line-height: 1.6; } [data-bg="dark"] .hero__lede { color: var(--ink-2); } .hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; } .hero__stage { position: absolute; right: calc(var(--pad) * -0.2); top: 50%; transform: translateY(-50%); width: min(640px, 52vw); aspect-ratio: 1; pointer-events: none; z-index: -1; } .hero__scroll { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--t-mono); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); } .hero__scroll-line { width: 1px; height: 48px; background: linear-gradient(to bottom, var(--accent), transparent); animation: scrollPulse 2.4s var(--ease) infinite; } @keyframes scrollPulse { 0%, 100% { opacity: 0.25; transform: scaleY(0.4); transform-origin: top; } 50% { opacity: 0.8; transform: scaleY(1); transform-origin: top; } } @media (max-width: 900px) { .hero { min-height: auto; padding-top: 110px; padding-bottom: 32px; } .hero__inner { gap: 1.5rem; } .hero__stage { position: relative; right: auto; top: auto; transform: none; width: 72vw; margin: 4px auto 0; opacity: 0.9; } .hero__scroll { display: none; } } /* ------------------------------------------------------------ Chrome hero centerpiece ------------------------------------------------------------ */ .chrome { position: absolute; inset: 0; border-radius: 50%; border: 0; background: transparent; box-shadow: none; transform-style: preserve-3d; perspective: 1000px; backdrop-filter: none; -webkit-backdrop-filter: none; overflow: visible; } .chrome__halo { position: absolute; inset: -8%; border-radius: 50%; background: conic-gradient(from 0deg, oklch(from var(--accent) l c h / 0.55), oklch(0.95 0.06 calc(var(--accent-h) + 40) / 0.3), oklch(from var(--accent-2) l c h / 0.5), oklch(0.9 0.12 calc(var(--accent-h) - 40) / 0.35), oklch(from var(--accent) l c h / 0.55)); filter: blur(40px); opacity: calc(0.9 * var(--glass-i)); animation: rot 22s linear infinite; } @keyframes rot { to { transform: rotate(360deg); } } .chrome__ring { position: absolute; border-radius: 50%; border: 1px solid var(--line-strong); left: 50%; top: 50%; transform: translate(-50%, -50%); } .chrome__ring--1 { width: 100%; height: 100%; border-color: oklch(from var(--accent) l c h / 0.35); } .chrome__ring--2 { width: 78%; height: 78%; border-style: dashed; opacity: 0.6; animation: rot 60s linear infinite reverse; } .chrome__ring--3 { width: 56%; height: 56%; border-color: oklch(from var(--accent-2) l c h / 0.45); animation: rot 40s linear infinite; } .chrome__core { position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 30% 25%, oklch(0.98 0.02 var(--accent-h)), transparent 45%), radial-gradient(circle at 70% 80%, oklch(from var(--accent-2) l c h / 0.6), transparent 50%), linear-gradient(140deg, oklch(0.85 0.08 var(--accent-h)) 0%, oklch(0.55 0.15 var(--accent-h)) 55%, oklch(0.25 0.1 var(--accent-h)) 100%); box-shadow: inset 0 0 60px oklch(from var(--accent) l c h / 0.35), inset 0 -10px 40px rgba(0, 0, 0, 0.2), 0 30px 80px -30px oklch(from var(--accent) l c h / 0.55); overflow: hidden; } .chrome__core-inner { position: absolute; inset: 12%; border-radius: 50%; background: conic-gradient(from 220deg, oklch(0.95 0.04 var(--accent-h)), oklch(0.55 0.18 var(--accent-h)), oklch(0.35 0.15 var(--accent-h)), oklch(0.9 0.07 calc(var(--accent-h) + 40)), oklch(0.95 0.04 var(--accent-h))); opacity: 0.9; animation: rot 30s linear infinite; mix-blend-mode: screen; } .chrome__highlight { position: absolute; top: 8%; left: 18%; width: 40%; height: 28%; background: radial-gradient(ellipse, rgba(255,255,255,0.85), transparent 70%); filter: blur(8px); border-radius: 50%; } .chrome__chip { position: absolute; padding: 10px 14px; background: var(--glass-bg); backdrop-filter: blur(calc(14px * var(--glass-i))) saturate(140%); border: 1px solid var(--glass-stroke); border-radius: 14px; box-shadow: 0 20px 40px -16px rgba(18, 32, 64, 0.25); font-family: var(--t-mono); font-size: 0.72rem; color: var(--muted); display: flex; flex-direction: column; gap: 2px; min-width: 120px; animation: floatY 6s ease-in-out infinite; pointer-events: none; } .chrome__chip b { font-family: var(--t-sans); font-size: 0.95rem; color: var(--ink); font-weight: 600; letter-spacing: -0.01em; } .chrome__chip span { letter-spacing: 0.15em; text-transform: uppercase; font-size: 0.6rem; color: var(--muted-2); } .chrome__chip--1 { top: 8%; left: -6%; animation-delay: 0s; } .chrome__chip--2 { top: 18%; right: -4%; animation-delay: -1.5s; } .chrome__chip--3 { bottom: 22%; left: -10%; animation-delay: -3s; } .chrome__chip--4 { bottom: 10%; right: -4%; animation-delay: -4.5s; } @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ------------------------------------------------------------ Ticker ------------------------------------------------------------ */ .ticker { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 18px 0; overflow: hidden; position: relative; background: var(--bg-3); mask-image: linear-gradient(90deg, transparent 0, black 10%, black 90%, transparent 100%); } .ticker__track { display: inline-flex; align-items: center; gap: 28px; animation: marquee 60s linear infinite; white-space: nowrap; } .ticker__track span { font-family: var(--t-sans); font-size: clamp(1.4rem, 2.8vw, 2.4rem); font-weight: 300; color: var(--ink); letter-spacing: -0.02em; } .ticker__track b { font-weight: 300; color: var(--accent); font-size: 0.8em; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ------------------------------------------------------------ Section shell ------------------------------------------------------------ */ .section { position: relative; padding: clamp(80px, 12vw, 160px) var(--pad); } .section__inner { max-width: var(--max); margin: 0 auto; position: relative; } /* ------------------------------------------------------------ VISION ------------------------------------------------------------ */ .vision__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 960px) { .vision__grid { grid-template-columns: 5fr 6fr; gap: 5rem; } } .vision__copy { display: flex; flex-direction: column; gap: 2rem; } .vision__visual { position: relative; } .glass-card--tall { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 22px; min-height: 440px; transform: translateZ(0); } .glass-card__chromeband { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent); opacity: 0.7; } .gc-label { font-family: var(--t-mono); font-size: 0.7rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); display: flex; align-items: center; gap: 10px; } .flow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .flow__node { position: relative; } .flow__doc { background: var(--bg-3); border: 1px solid var(--line); border-radius: 14px; padding: 14px 14px 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 10px 30px -12px rgba(18, 32, 64, 0.15); font-size: 0.82rem; } .flow__doc-hdr { display: flex; justify-content: space-between; align-items: center; font-family: var(--t-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .flow__chip { background: oklch(from var(--accent) l c h / 0.12); color: var(--accent-deep); padding: 2px 6px; border-radius: 6px; font-size: 0.62rem; } [data-bg="dark"] .flow__chip { color: var(--accent); } .flow__doc-row { display: flex; justify-content: space-between; gap: 8px; color: var(--ink); font-size: 0.85rem; } .flow__doc-row b { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.01em; } .flow__doc-bar { height: 4px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 4px; } .flow__doc-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); border-radius: inherit; animation: fillBar 2.4s var(--ease-out) infinite alternate; } @keyframes fillBar { from { width: 15%; } to { width: 86%; } } .flow__arrow { display: flex; flex-direction: column; align-items: center; gap: 6px; color: var(--muted); font-family: var(--t-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; } .flow__arrow svg { width: 60px; height: 18px; color: var(--accent); } @media (max-width: 640px) { .flow { grid-template-columns: 1fr; text-align: left; } .flow__arrow { transform: rotate(90deg); margin: 8px 0; } } .flow__coin { position: relative; width: 120px; height: 120px; margin: 0 auto; border-radius: 50%; background: radial-gradient(circle at 30% 30%, oklch(0.98 0.01 var(--accent-h)), transparent 50%), linear-gradient(150deg, oklch(0.9 0.1 var(--accent-h)), oklch(0.45 0.18 var(--accent-h))); box-shadow: inset 0 0 40px oklch(from var(--accent) l c h / 0.35), inset 0 -8px 24px rgba(0,0,0,0.15), 0 20px 40px -10px oklch(from var(--accent) l c h / 0.4); display: grid; place-items: center; overflow: hidden; } .flow__coin-ring { position: absolute; inset: 8px; border-radius: 50%; border: 1px dashed rgba(255,255,255,0.4); animation: rot 16s linear infinite; } .flow__coin-core { position: relative; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.6), transparent 40%), linear-gradient(180deg, oklch(0.95 0.03 var(--accent-h)), oklch(0.6 0.15 var(--accent-h))); display: grid; place-items: center; font-family: var(--t-sans); font-weight: 700; font-size: 0.9rem; color: oklch(0.2 0.1 var(--accent-h)); letter-spacing: -0.01em; } .flow__coin-meta { text-align: center; margin-top: 12px; display: flex; flex-direction: column; gap: 2px; } .flow__coin-meta span { font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted); } .flow__coin-meta b { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .gc-divider { height: 1px; background: var(--line); margin-top: auto; } .gc-footer { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding-top: 4px; } .gc-footer > div { display: flex; flex-direction: column; gap: 2px; } .gc-footer span { font-family: var(--t-mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-2); } .gc-footer b { font-variant-numeric: tabular-nums; font-size: 0.85rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } /* ------------------------------------------------------------ STATS ------------------------------------------------------------ */ .stats__heading { max-width: 16ch; margin-bottom: 3.5rem; } .stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; } .stat-card { padding: 24px 22px 20px; min-height: 200px; display: flex; flex-direction: column; gap: 8px; position: relative; transition: transform 0.6s var(--ease); will-change: transform; } .stat-card__label { font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .stat-card__num { font-family: var(--t-sans); font-size: clamp(2.2rem, 3.8vw, 3rem); font-weight: 500; letter-spacing: -0.035em; color: var(--ink); font-variant-numeric: tabular-nums; background: linear-gradient(160deg, var(--ink) 0%, var(--accent-deep) 120%); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1; margin-top: 4px; } [data-bg="dark"] .stat-card__num { background: linear-gradient(160deg, var(--ink) 0%, var(--accent) 120%); -webkit-background-clip: text; background-clip: text; } .stat-card__meta { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; color: var(--muted); margin-top: auto; } .stat-card__spark { position: absolute; right: 18px; top: 22px; width: 80px; height: 24px; color: var(--accent); opacity: 0.7; } .stat-card__spark svg { width: 100%; height: 100%; } .stats__note { margin-top: 24px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--t-mono); font-size: 0.72rem; color: var(--muted-2); letter-spacing: 0.05em; } /* ------------------------------------------------------------ OPPORTUNITIES ------------------------------------------------------------ */ .opps__grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 3rem; } @media (min-width: 900px) { .opps__grid { grid-template-columns: repeat(3, 1fr); gap: 20px; } } .opp-card { padding: 28px 26px 26px; display: flex; flex-direction: column; gap: 16px; min-height: 360px; transition: transform 0.6s var(--ease), box-shadow 0.6s var(--ease); will-change: transform; } .opp-card:hover { transform: translateY(-4px); box-shadow: 0 40px 90px -30px oklch(from var(--accent) l c h / 0.35), 0 10px 30px -8px rgba(18, 32, 64, 0.15); } .opp-card__glass { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(400px 200px at 100% 0%, oklch(from var(--accent) l c h / 0.18), transparent 70%); opacity: 0.8; } .opp-card--featured .opp-card__glass { background: radial-gradient(500px 300px at 0% 100%, oklch(from var(--accent-2) l c h / 0.25), transparent 70%), radial-gradient(400px 200px at 100% 0%, oklch(from var(--accent) l c h / 0.2), transparent 70%); } .opp-card__num { font-family: var(--t-mono); font-size: 0.8rem; letter-spacing: 0.25em; color: var(--accent); position: relative; } .opp-card__title { font-family: var(--t-sans); font-weight: 500; letter-spacing: -0.025em; font-size: clamp(1.4rem, 2vw, 1.7rem); color: var(--ink); line-height: 1.1; position: relative; } .opp-card__desc { color: var(--muted); font-size: 0.95rem; line-height: 1.6; position: relative; } [data-bg="dark"] .opp-card__desc { color: var(--ink-2); } .opp-card__foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 18px; border-top: 1px solid var(--line); position: relative; } .opp-card__yield { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; } .opp-card__yield span { font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted-2); } .opp-card__yield b { font-family: var(--t-sans); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: -0.025em; color: var(--accent-deep); font-variant-numeric: tabular-nums; } .opp-card__yield b em { font-style: normal; font-size: 0.6em; font-weight: 500; color: var(--muted); } [data-bg="dark"] .opp-card__yield b { color: var(--accent); } .opp-card__yield--muted b { color: var(--muted); } .opp-card__tags { display: flex; gap: 6px; flex-wrap: wrap; } .opp-card__tags span { padding: 4px 10px; border-radius: 99px; background: var(--bg-3); border: 1px solid var(--line); font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.1em; color: var(--muted); } /* ------------------------------------------------------------ MECHANICS ------------------------------------------------------------ */ .mech__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: start; } @media (min-width: 960px) { .mech__grid { grid-template-columns: 5fr 7fr; gap: 5rem; } } .mech__copy { display: flex; flex-direction: column; gap: 2rem; } .loop { padding: 20px; aspect-ratio: 520 / 420; position: relative; overflow: hidden; border-radius: 26px; } .loop__svg { width: 100%; height: 100%; } .loop__node { position: absolute; background: var(--glass-bg); backdrop-filter: blur(calc(12px * var(--glass-i))) saturate(140%); border: 1px solid var(--glass-stroke); border-radius: 12px; padding: 8px 12px; box-shadow: 0 14px 30px -12px rgba(18, 32, 64, 0.2); font-family: var(--t-sans); min-width: 120px; } .loop__node-lbl { font-family: var(--t-mono); font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-2); display: block; } .loop__node b { font-size: 0.9rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); } .loop__node--1 { top: 38%; left: 3%; } .loop__node--2 { top: 8%; left: 40%; } .loop__node--3 { top: 38%; right: 3%; } .loop__node--4 { bottom: 8%; left: 40%; } /* ------------------------------------------------------------ CTA / THESIS ------------------------------------------------------------ */ .cta { padding: clamp(100px, 16vw, 200px) var(--pad); text-align: center; position: relative; } .cta__inner { max-width: 900px; } .cta__heading { font-family: var(--t-sans); font-weight: 500; letter-spacing: -0.04em; line-height: 0.92; font-size: clamp(3rem, 8.5vw, 6.8rem); margin: 1.5rem 0 1.5rem; text-wrap: balance; } .cta__heading em { font-style: normal; background: linear-gradient(100deg, var(--accent-deep) 0%, var(--accent) 45%, var(--accent-2) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .cta__lede { max-width: 34rem; margin: 0 auto 3rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); color: var(--muted); line-height: 1.6; } [data-bg="dark"] .cta__lede { color: var(--ink-2); } .cta__actions { display: flex; flex-direction: column; align-items: center; gap: 28px; } .cta__manifesto { display: inline-flex; align-items: center; gap: 14px; font-size: clamp(1.2rem, 2.2vw, 1.7rem); font-weight: 500; color: var(--ink); letter-spacing: -0.02em; position: relative; padding-bottom: 4px; transition: color 0.3s var(--ease); } .cta__manifesto::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px; background: var(--accent); transform: scaleX(0.15); transform-origin: left; transition: transform 0.5s var(--ease); } .cta__manifesto:hover::after { transform: scaleX(1); } .cta__manifesto .btn__arrow { color: var(--accent); transition: transform 0.4s var(--ease); } .cta__manifesto:hover .btn__arrow { transform: translate(4px, -4px); } /* ------------------------------------------------------------ Footer ------------------------------------------------------------ */ .foot { border-top: 1px solid var(--line); padding: 32px var(--pad); background: var(--bg-3); } .foot__inner { max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; } .foot__brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; letter-spacing: -0.02em; } .foot__links { display: flex; gap: 20px; font-size: 0.85rem; color: var(--muted); } .foot__links a:hover { color: var(--accent); } .foot__tag { font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.22em; color: var(--muted-2); } /* ------------------------------------------------------------ Scroll reveal ------------------------------------------------------------ */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 1s var(--ease-out), transform 1s var(--ease-out); } [data-reveal].in-view { opacity: 1; transform: none; } [data-reveal][data-delay="1"] { transition-delay: 0.1s; } [data-reveal][data-delay="2"] { transition-delay: 0.2s; } [data-reveal][data-delay="3"] { transition-delay: 0.3s; } [data-reveal][data-delay="4"] { transition-delay: 0.4s; } [data-reveal][data-delay="5"] { transition-delay: 0.5s; } [data-reveal][data-delay="6"] { transition-delay: 0.7s; } /* ------------------------------------------------------------ Tweaks panel ------------------------------------------------------------ */ .tweaks[hidden] { display: none !important; } .tweaks { position: fixed; right: 20px; bottom: 20px; z-index: 100; width: 280px; padding: 18px; border-radius: 18px; display: flex; flex-direction: column; gap: 12px; font-size: 0.85rem; } .tweaks__hdr { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--line); } .tweaks__hdr b { font-weight: 600; letter-spacing: -0.01em; } .tweaks__hdr span { font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.12em; color: var(--muted-2); text-transform: uppercase; } .tweaks__row { display: grid; grid-template-columns: 84px 1fr auto; align-items: center; gap: 10px; font-size: 0.8rem; } .tweaks__row label { color: var(--muted); } .tweaks__row input[type="range"] { width: 100%; accent-color: var(--accent); } .tweaks__row span[data-tw-val] { font-family: var(--t-mono); font-size: 0.7rem; color: var(--ink); min-width: 34px; text-align: right; } .tweaks__row--seg, .tweaks__row--check { grid-template-columns: 84px 1fr; } .seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .seg button { padding: 6px 8px; font-size: 0.75rem; color: var(--muted); background: transparent; transition: background 0.2s, color 0.2s; } .seg button + button { border-left: 1px solid var(--line); } .seg button.is-on { background: var(--accent); color: #fff; } .tweaks__row--check input[type="checkbox"] { accent-color: var(--accent); width: 18px; height: 18px; } @media (max-width: 640px) { .tweaks { width: calc(100vw - 24px); right: 12px; bottom: 12px; } } /* ------------------------------------------------------------ Institutional homepage components ------------------------------------------------------------ */ /* Stacked term + description rows (Contractual cashflows card) */ .res-list { list-style: none; display: flex; flex-direction: column; position: relative; } .res-list li { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-bottom: 1px solid var(--line); } .res-list li:last-child { border-bottom: none; padding-bottom: 0; } .res-list b { font-weight: 600; font-size: 0.95rem; letter-spacing: -0.01em; color: var(--ink); } .res-list span { font-size: 0.82rem; color: var(--muted); line-height: 1.5; } /* Key/value rows (Network card) */ .res-rows { list-style: none; position: relative; } .res-rows li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); } .res-rows li:last-child { border-bottom: none; padding-bottom: 0; } .res-rows span { font-size: 0.85rem; color: var(--muted); } .res-rows b { font-family: var(--t-mono); font-size: 0.82rem; font-weight: 600; color: var(--ink); text-align: right; white-space: nowrap; } .res-rows b.is-accent { color: var(--accent-deep); } [data-bg="dark"] .res-rows b.is-accent { color: var(--accent); } /* Position rows with pill (Representative positions card) */ .res-pill { font-family: var(--t-mono); font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-deep); background: oklch(from var(--accent) l c h / 0.1); border: 1px solid oklch(from var(--accent) l c h / 0.2); padding: 3px 9px; border-radius: 99px; white-space: nowrap; } [data-bg="dark"] .res-pill { color: var(--accent); } /* Horizontal strip: institutional access / risk management */ .strip { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 30px; padding: 20px 26px; background: var(--glass-bg); backdrop-filter: blur(calc(14px * var(--glass-i))) saturate(140%); -webkit-backdrop-filter: blur(calc(14px * var(--glass-i))) saturate(140%); border: 1px solid var(--glass-stroke); border-radius: 18px; box-shadow: var(--glass-shadow); } .strip__label { font-family: var(--t-mono); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-deep); flex-shrink: 0; } [data-bg="dark"] .strip__label { color: var(--accent); } .strip__item { font-size: 0.88rem; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; } .strip__item::before { content: "◆"; font-size: 0.55rem; color: var(--accent); opacity: 0.7; } @media (max-width: 640px) { .strip { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 22px; } } /* Compact option cards (Hold / Unlock / Exit) */ .opp-card--compact { min-height: 0; padding: 24px 24px 22px; gap: 10px; } .opp-card--compact .opp-card__desc { font-size: 0.92rem; } /* Invoice ledger (transparency section) */ .ledger { display: flex; flex-direction: column; font-family: var(--t-mono); } .ledger__row { display: grid; grid-template-columns: 0.9fr 1.2fr 1fr 0.6fr auto; gap: 12px; align-items: center; padding: 11px 4px; border-bottom: 1px solid var(--line); font-size: 0.76rem; color: var(--ink); } .ledger__row:last-child { border-bottom: none; } .ledger__row--head { font-size: 0.6rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-2); border-bottom: 1px solid var(--line-strong); } .ledger__row b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; } .ledger__row em { font-style: normal; color: var(--muted); } .ledger__status { justify-self: end; font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 3px 9px; border-radius: 99px; border: 1px solid var(--line-strong); color: var(--muted); white-space: nowrap; } .ledger__status--ok { color: var(--accent-deep); border-color: oklch(from var(--accent) l c h / 0.3); background: oklch(from var(--accent) l c h / 0.1); } [data-bg="dark"] .ledger__status--ok { color: var(--accent); } @media (max-width: 640px) { .ledger__row { grid-template-columns: 0.9fr 1.1fr 1fr auto; } .ledger__row > :nth-child(4) { display: none; } } /* Footer disclaimer */ .foot__disc { max-width: var(--max); margin: 0 auto 20px; font-family: var(--t-mono); font-size: 0.64rem; letter-spacing: 0.03em; line-height: 1.7; color: var(--muted-2); } /* ------------------------------------------------------------ Global access (local opportunities → stablecoin liquidity hub) ------------------------------------------------------------ */ .geo__head { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: end; margin-bottom: clamp(2rem, 4vw, 3rem); } @media (min-width: 960px) { .geo__head { grid-template-columns: 6fr 5fr; gap: 5rem; } } .geo__stage { position: relative; border-radius: 26px; overflow: hidden; } .geo__svg { display: block; width: 100%; height: auto; aspect-ratio: 1000 / 440; } .geo__node { position: absolute; transform: translate(-50%, -50%); background: var(--glass-bg); backdrop-filter: blur(calc(12px * var(--glass-i))) saturate(140%); -webkit-backdrop-filter: blur(calc(12px * var(--glass-i))) saturate(140%); border: 1px solid var(--glass-stroke); border-radius: 12px; padding: 8px 13px; box-shadow: 0 14px 30px -12px rgba(18, 32, 64, 0.2); min-width: 128px; } .geo__node span { font-family: var(--t-mono); font-size: 0.58rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--muted-2); display: block; } .geo__node b { font-size: 0.88rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); white-space: nowrap; } .geo__node--1 { left: 13%; top: 19%; } .geo__node--2 { left: 37.2%; top: 13.6%; } .geo__node--3 { left: 63.6%; top: 13.6%; } .geo__node--4 { left: 87.2%; top: 19%; } .geo__node--5 { left: 21%; top: 47.7%; } .geo__node--6 { left: 79.2%; top: 47.7%; } .geo__hub { position: absolute; left: 50%; top: 81%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 14px; background: linear-gradient(160deg, var(--ink) 0%, var(--ink-2) 100%); color: var(--bg); padding: 14px 22px; border-radius: 16px; border: 1px solid oklch(from var(--ink) l c h / 0.8); box-shadow: 0 24px 60px -20px oklch(from var(--accent) l c h / 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.15); white-space: nowrap; } [data-bg="dark"] .geo__hub { color: var(--bg-2); } .geo__hub-txt { display: flex; flex-direction: column; gap: 2px; } .geo__hub-txt span { font-family: var(--t-mono); font-size: 0.58rem; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; } .geo__hub-txt b { font-size: 0.92rem; font-weight: 600; letter-spacing: -0.01em; } @media (max-width: 719px) { .geo__svg { display: none; } .geo__stage { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 18px; } .geo__node { position: static; transform: none; min-width: 0; } .geo__node b { white-space: normal; font-size: 0.82rem; } .geo__hub { position: static; transform: none; grid-column: 1 / -1; justify-content: center; margin-top: 8px; white-space: normal; text-align: left; } } /* ------------------------------------------------------------ Institutional access carousel ------------------------------------------------------------ */ .iaccess__heading { max-width: 16ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .rail { display: grid; grid-auto-flow: column; grid-auto-columns: clamp(250px, 27vw, 330px); gap: 18px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; padding: 6px 6px 22px; scrollbar-width: none; outline: none; } .rail::-webkit-scrollbar { display: none; } .rail__card { scroll-snap-align: start; min-height: 0; padding: 26px 24px 24px; gap: 12px; } .rail__card .opp-card__num { font-size: 1.4rem; letter-spacing: 0.1em; opacity: 0.9; } .rail__card .opp-card__title { font-size: clamp(1.2rem, 1.6vw, 1.4rem); } .rail__card .opp-card__desc { font-size: 0.92rem; } .rail__hint { font-family: var(--t-mono); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted-2); display: flex; align-items: center; gap: 10px; } @media (min-width: 1400px) { .rail__hint { display: none; } } /* ------------------------------------------------------------ Contact form ------------------------------------------------------------ */ .cform { width: 100%; max-width: 540px; margin: 0 auto; text-align: left; display: flex; flex-direction: column; gap: 16px; padding: 28px; background: var(--glass-bg); backdrop-filter: blur(calc(18px * var(--glass-i))) saturate(140%); -webkit-backdrop-filter: blur(calc(18px * var(--glass-i))) saturate(140%); border: 1px solid var(--glass-stroke); border-radius: 22px; box-shadow: var(--glass-shadow); } .cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } @media (max-width: 560px) { .cform__row { grid-template-columns: 1fr; } } .cform__field { display: flex; flex-direction: column; gap: 7px; } .cform__field > span { font-family: var(--t-mono); font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .cform__field > span em { font-style: normal; text-transform: none; letter-spacing: 0.02em; color: var(--muted-2); } .cform__field input, .cform__field select, .cform__field textarea { font: inherit; font-size: 0.95rem; color: var(--ink); background: var(--bg-3); border: 1px solid var(--line-strong); border-radius: 12px; padding: 12px 14px; width: 100%; transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease); } .cform__field textarea { min-height: 112px; line-height: 1.55; resize: vertical; } .cform__field select { appearance: none; cursor: pointer; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } .cform__field input::placeholder, .cform__field textarea::placeholder { color: var(--muted-2); } .cform__field input:focus, .cform__field select:focus, .cform__field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px oklch(from var(--accent) l c h / 0.15); } .cform__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .cform__submit { justify-content: center; margin-top: 4px; } .cform__submit[disabled] { opacity: 0.65; cursor: default; transform: none; } .cform__status { margin: 0; min-height: 1.2em; text-align: center; font-size: 0.85rem; color: var(--muted); } .cform__status.is-ok { color: var(--accent-deep); font-weight: 500; } [data-bg="dark"] .cform__status.is-ok { color: var(--accent); } .cform__status.is-err { color: #c0392b; } [data-bg="dark"] .cform__status.is-err { color: #e88; } .cform__alt { display: inline-flex; align-items: center; gap: 8px; font-size: 0.9rem; color: var(--muted); transition: color 0.3s var(--ease); } .cform__alt:hover { color: var(--accent-deep); } [data-bg="dark"] .cform__alt:hover { color: var(--accent); } .cform__alt .btn__arrow { color: var(--accent); } /* ------------------------------------------------------------ Prefers reduced motion ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } [data-reveal] { opacity: 1; transform: none; } }