/* CoinMarketPulse site — shared design system. Fonts self-hosted (no Google Fonts CDN call from visitors — keeps this site's own footprint consistent with the privacy policy it links to). Montserrat for headings/UI, Inter for body copy — the same pairing the Android app uses (UiFontFamily/DataTypography). Motion follows Material3's standard easing/duration scale and is fully disabled under prefers-reduced-motion. */ @font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(/assets/fonts/montserrat.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url(/assets/fonts/inter.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { color-scheme: dark; --bg: #111417; --surface: #1a1d21; --surface-2: #22262b; --on-surface: #e1e2e7; --on-surface-muted: #9a9ca3; --primary: #c3c0ff; --primary-ink: #1a1030; --up: #44e092; --down: #ffb4aa; --border: rgba(255, 255, 255, 0.08); --font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Material3 standard motion tokens. */ --m3-easing: cubic-bezier(0.2, 0, 0, 1); --m3-easing-emphasized: cubic-bezier(0.3, 0, 0, 1); --m3-duration-short: 150ms; --m3-duration-medium: 350ms; --m3-duration-long: 550ms; /* Material3-style elevation shadows (levels 1/3), tuned for a dark surface. */ --elevation-1: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3); --elevation-3: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.3); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--on-surface); font-family: var(--font-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3, .btn, nav.top-links, .brand { font-family: var(--font-heading); } a { color: var(--primary); } .wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; position: relative; z-index: 1; } /* ---------- Reveal-on-scroll (progressive enhancement) ---------- Elements only start hidden once main.js confirms it's running (adds .js to ); without JS, or with prefers-reduced-motion, everything is visible immediately. */ html.js .reveal { opacity: 0; transform: translateY(18px); } html.js .reveal.in-view { opacity: 1; transform: none; transition: opacity var(--m3-duration-long) var(--m3-easing-emphasized), transform var(--m3-duration-long) var(--m3-easing-emphasized); } @media (prefers-reduced-motion: reduce) { html.js .reveal { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } } /* ---------- Header ---------- */ header.top { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; max-width: 1040px; margin: 0 auto; background: transparent; border-bottom: 1px solid transparent; backdrop-filter: blur(14px); transition: background var(--m3-duration-medium) var(--m3-easing), border-color var(--m3-duration-medium) var(--m3-easing); } header.top.scrolled { background: rgba(17, 20, 23, 0.78); border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 1.05rem; } .brand img { width: 30px; height: 30px; border-radius: 8px; } nav.top-links { display: flex; gap: 8px; font-size: 0.92rem; font-weight: 500; } nav.top-links a { position: relative; color: var(--on-surface-muted); text-decoration: none; padding: 8px 12px; border-radius: 999px; transition: color var(--m3-duration-short) var(--m3-easing), background var(--m3-duration-short) var(--m3-easing); } nav.top-links a:hover, nav.top-links a:focus-visible { color: var(--on-surface); background: rgba(255, 255, 255, 0.06); } /* ---------- Buttons (Material3 filled/outlined, state layer + ripple) ---------- */ .btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 1rem; border: none; cursor: pointer; transition: transform var(--m3-duration-short) var(--m3-easing), box-shadow var(--m3-duration-short) var(--m3-easing); } .btn:active { transform: scale(0.97); } .btn-primary { background: var(--primary); color: var(--primary-ink); box-shadow: var(--elevation-1); } .btn-primary:hover { box-shadow: var(--elevation-3); } .btn-secondary { background: transparent; color: var(--on-surface); border: 1.5px solid var(--border); } .btn-secondary:hover { border-color: var(--primary); } /* State layer: a soft overlay that fades in on hover, per M3's interaction-state spec. */ .btn::before { content: ""; position: absolute; inset: 0; background: currentColor; opacity: 0; transition: opacity var(--m3-duration-short) var(--m3-easing); pointer-events: none; } .btn-primary::before { background: var(--primary-ink); } .btn:hover::before { opacity: 0.08; } .btn:active::before { opacity: 0.14; } /* Ripple spans injected by main.js on click. */ .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: 0.35; pointer-events: none; animation: ripple 600ms var(--m3-easing) forwards; } .btn-primary .ripple { background: var(--primary-ink); } @keyframes ripple { to { transform: scale(2.6); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .btn, .btn::before { transition: none; } .ripple { animation: none; display: none; } } /* ---------- Feature cards ---------- */ .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 32px 0 64px; } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 24px; transition: transform var(--m3-duration-medium) var(--m3-easing), box-shadow var(--m3-duration-medium) var(--m3-easing), border-color var(--m3-duration-medium) var(--m3-easing); } .feature:hover { transform: translateY(-6px); box-shadow: var(--elevation-3); border-color: rgba(195, 192, 255, 0.35); } .feature .glyph { font-size: 1.6rem; margin-bottom: 12px; display: inline-block; transition: transform var(--m3-duration-medium) var(--m3-easing-emphasized); } .feature:hover .glyph { transform: scale(1.15) rotate(-4deg); } .feature h3 { margin: 0 0 8px; font-size: 1.05rem; } .feature p { margin: 0; color: var(--on-surface-muted); font-size: 0.92rem; } @media (prefers-reduced-motion: reduce) { .feature, .feature .glyph { transition: none; } .feature:hover { transform: none; } .feature:hover .glyph { transform: none; } } /* ---------- Decorative background blobs ---------- */ .blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .blob { position: absolute; border-radius: 50%; filter: blur(110px); opacity: 0.14; } .blob-1 { top: -12%; right: -8%; width: 46vw; height: 46vw; background: var(--primary); animation: drift1 22s ease-in-out infinite; } .blob-2 { bottom: -14%; left: -10%; width: 38vw; height: 38vw; background: var(--up); opacity: 0.08; animation: drift2 26s ease-in-out infinite; } @keyframes drift1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-4%, 3%) scale(1.06); } } @keyframes drift2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(3%, -4%) scale(1.08); } } @media (prefers-reduced-motion: reduce) { .blob-1, .blob-2 { animation: none; } } footer { padding: 40px 0 60px; color: var(--on-surface-muted); font-size: 0.88rem; text-align: center; } footer .links { display: flex; gap: 20px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; } footer .links a { color: var(--on-surface-muted); text-decoration: none; transition: color var(--m3-duration-short) var(--m3-easing); } footer .links a:hover { color: var(--on-surface); } /* ---------- Reading-progress bar (privacy/terms) ---------- */ .progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0%; background: var(--primary); z-index: 100; transition: width 80ms linear; } @media (prefers-reduced-motion: reduce) { .progress-bar { transition: none; } }