/* ========================================================================= ZENI — PAGES-VERGE.CSS Page-specific Verge-theme overrides. Loaded on dashboard, ask, pricing, and features pages. Every rule is scoped to [data-theme="verge"] so it only activates when is set. Palette (from DESIGN.md): - Canvas Black: #131313 - Jelly Mint: #3cffd0 - Verge UV: #5200ff - Purple Rule: #3d00bf - Hazard White: #ffffff - Surface Slate: #2d2d2d - Secondary Text: #949494 - Deep Link Blue: #3860be - Console Mint: #309875 Typography substitutes: - Manuka -> Archivo Black (900) - PolySans -> Space Grotesk (300/500/700) - PolySans Mono -> Space Mono (400/500/700) ========================================================================= */ /* ========================================================================= 1) DASHBOARD PAGE — Verge mockup treatment ========================================================================= */ /* Mockup section + stage — flat canvas, no radial */ [data-theme="verge"] .mockup { background: #131313; } [data-theme="verge"] .mockup__caption { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; color: #949494; } /* Device frame — color-as-elevation, 1px border replaces shadow */ [data-theme="verge"] .mockup__frame { background: #131313; border: 1px solid #ffffff; border-radius: 24px; box-shadow: none; padding: 20px; gap: 16px; } /* Top bar */ [data-theme="verge"] .mockup__wordmark { font-family: "Archivo Black", Impact, Helvetica, sans-serif; font-weight: 900; color: #ffffff; letter-spacing: 1.5px; } [data-theme="verge"] .mockup__dot { background: #3cffd0; box-shadow: none; } [data-theme="verge"] .mockup__avatar { background: #2d2d2d; border: 1px solid rgba(255, 255, 255, 0.15); color: #ffffff; font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 700; } /* Shared eyebrow — Space Mono micro */ [data-theme="verge"] .mockup__eyebrow { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; color: #3cffd0; margin: 0 0 10px 0; } /* Balance card — saturated ultraviolet accent block */ [data-theme="verge"] .mockup__balance { background: rgba(82, 0, 255, 0.9); border: none; border-radius: 20px; padding: 20px; } [data-theme="verge"] .mockup__balance .mockup__eyebrow { color: #ffffff; opacity: 0.85; } [data-theme="verge"] .mockup__amount { font-family: "Archivo Black", Impact, Helvetica, sans-serif; font-weight: 900; font-size: 48px; line-height: 0.95; letter-spacing: 0; color: #ffffff; margin: 0 0 10px 0; text-transform: uppercase; } [data-theme="verge"] .mockup__delta, [data-theme="verge"] .mockup__delta--down, [data-theme="verge"] .mockup__delta--up { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; color: #3cffd0; } /* Pattern / donut container */ [data-theme="verge"] .mockup__pattern { background: #131313; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 18px 18px 18px; } [data-theme="verge"] .mockup__donut { box-shadow: none; } [data-theme="verge"] .mockup__donut::after { background: #131313; border: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="verge"] .mockup__donut-label { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 9px; font-weight: 500; letter-spacing: 1.1px; color: #949494; } [data-theme="verge"] .mockup__donut-value { font-family: "Archivo Black", Impact, Helvetica, sans-serif; font-weight: 900; color: #ffffff; letter-spacing: 0; } /* Legend rows — each a pill */ [data-theme="verge"] .mockup__legend { gap: 6px; } [data-theme="verge"] .mockup__legend-row { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; color: #ffffff; padding: 6px 10px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.02); } [data-theme="verge"] .mockup__legend-name { color: #ffffff; } [data-theme="verge"] .mockup__legend-pct { color: #3cffd0; } [data-theme="verge"] .mockup__legend-amt { color: #949494; } /* Transactions container */ [data-theme="verge"] .mockup__txns { background: #131313; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; padding: 18px 16px; } [data-theme="verge"] .mockup__txn-list { gap: 8px; } /* Each transaction becomes a pill */ [data-theme="verge"] .mockup__txn { padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.15); border-bottom: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; background: transparent; transition: border-color 150ms ease, background-color 150ms ease; } [data-theme="verge"] .mockup__txn:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="verge"] .mockup__txn:hover { border-color: rgba(60, 255, 208, 0.5); } [data-theme="verge"] .mockup__txn:hover .mockup__txn-name { color: #3860be; } [data-theme="verge"] .mockup__txn-name { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 12px; letter-spacing: 0.5px; color: #ffffff; transition: color 150ms ease; } [data-theme="verge"] .mockup__txn-date { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 10px; font-weight: 500; letter-spacing: 1.1px; color: #949494; } [data-theme="verge"] .mockup__txn-amt { font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 700; font-size: 12px; letter-spacing: 1px; } [data-theme="verge"] .mockup__txn-amt--pos { color: #3cffd0; } [data-theme="verge"] .mockup__txn-amt--neg { color: #ffffff; } [data-theme="verge"] .mockup__txn-icon { border-radius: 50%; } /* ASK ZENI bar — mint-bordered pill with mono placeholder */ [data-theme="verge"] .mockup__ask { background: #131313; border: 1px solid #3cffd0; border-radius: 20px; padding: 10px 12px 10px 16px; } [data-theme="verge"] .mockup__ask-label { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #3cffd0; } [data-theme="verge"] .mockup__ask-input { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 12px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; color: #949494; } [data-theme="verge"] .mockup__ask-send { background: #3cffd0; border: none; color: #000000; border-radius: 50%; font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 700; transition: background-color 150ms ease, color 150ms ease; } [data-theme="verge"] .mockup__ask-send:hover { background: rgba(255, 255, 255, 0.2); color: #000000; } /* Dashboard moments / scenes — strip radial gradients for flat canvas */ [data-theme="verge"] .scene--intro, [data-theme="verge"] .scene--moments { background: #131313; } /* ========================================================================= 2) ASK PAGE — Verge chat treatment ========================================================================= */ [data-theme="verge"] .ask-intro, [data-theme="verge"] .ask { background: #131313; } /* Chat log container */ [data-theme="verge"] .chat__log { background: #131313; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; padding: 24px; gap: 14px; } [data-theme="verge"] .chat__log::-webkit-scrollbar { width: 8px; } [data-theme="verge"] .chat__log::-webkit-scrollbar-track { background: #2d2d2d; border-radius: 4px; } [data-theme="verge"] .chat__log::-webkit-scrollbar-thumb { background: #3cffd0; border-radius: 4px; } /* Bubbles — reset base */ [data-theme="verge"] .chat__bubble { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.55; letter-spacing: 0; padding: 14px 20px; max-width: 80%; word-wrap: break-word; overflow-wrap: break-word; } [data-theme="verge"] .chat__bubble strong { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 700; letter-spacing: 0; } /* USER — mint-filled with tight tail corner */ [data-theme="verge"] .chat__msg--user .chat__bubble { background: #3cffd0; color: #000000; border: none; border-radius: 20px 20px 4px 20px; text-transform: none; letter-spacing: 0; } /* ZENI — slate surface with tight tail corner */ [data-theme="verge"] .chat__msg--zeni .chat__bubble { background: #2d2d2d; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px 20px 20px 4px; text-transform: none; letter-spacing: 0; } /* Typing indicator */ [data-theme="verge"] .chat__typing-label { font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; color: #3cffd0; opacity: 1; } [data-theme="verge"] .chat__dot { background: #3cffd0; } /* Suggested prompts — tertiary outlined mint pill */ [data-theme="verge"] .ask__prompt { background: transparent; color: #3cffd0; border: 1px solid #3cffd0; border-radius: 40px; padding: 10px 20px; font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 12px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; transition: background-color 150ms ease, color 150ms ease; } [data-theme="verge"] .ask__prompt:hover, [data-theme="verge"] .ask__prompt:focus-visible { background: #3cffd0; color: #000000; } /* Text input — 2px radius typewriter feel */ [data-theme="verge"] .ask__input { background: #131313; color: #ffffff; border: 1px solid #949494; border-radius: 2px; padding: 16px 20px; font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 400; font-size: 15px; letter-spacing: 0.15px; text-transform: none; transition: border-color 150ms ease; } [data-theme="verge"] .ask__input::placeholder { color: #949494; font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 400; text-transform: none; letter-spacing: 0.15px; } [data-theme="verge"] .ask__input:hover { border-color: #ffffff; } [data-theme="verge"] .ask__input:focus, [data-theme="verge"] .ask__input:focus-visible { outline: none; border-color: #3cffd0; background: #131313; } /* SEND button inherits .btn override from styles-verge.css */ /* ========================================================================= 3) PRICING PAGE — Verge tier tiles ========================================================================= */ [data-theme="verge"] .price__intro, [data-theme="verge"] .price__grid-section, [data-theme="verge"] .price__reassure, [data-theme="verge"] .faq { background: #131313; } [data-theme="verge"] .price__grid { gap: 24px; } /* Tier panel — feature card radius + hairline */ [data-theme="verge"] .tier { background: #131313; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 24px; padding: 40px 32px; transition: border-color 150ms ease; } [data-theme="verge"] .tier:hover { transform: none; border-color: #3cffd0; } /* Featured tier — ultraviolet accent tile */ [data-theme="verge"] .tier--featured { background: rgba(82, 0, 255, 0.9); border: none; color: #ffffff; } [data-theme="verge"] .tier--featured:hover { border: none; background: rgba(82, 0, 255, 0.95); } /* MOST CHOSEN stamp — mint pill with black text */ [data-theme="verge"] .tier__stamp { position: absolute; top: 20px; left: 20px; padding: 6px 14px; background: #3cffd0; color: #000000; border: none; border-radius: 20px; font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; } /* Eyebrow (tier name) */ [data-theme="verge"] .tier__eyebrow { font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 500; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #3cffd0; margin: 0 0 28px 0; } [data-theme="verge"] .tier--featured .tier__eyebrow { color: #ffffff; margin-top: 40px; } /* Price display — Archivo Black massive */ [data-theme="verge"] .tier__price { font-family: "Archivo Black", Impact, Helvetica, sans-serif; font-weight: 900; font-size: clamp(48px, 7vw, 72px); line-height: 0.95; letter-spacing: 0; color: #ffffff; text-transform: uppercase; margin: 0; } [data-theme="verge"] .tier__per { font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 500; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; opacity: 0.8; margin: 0; } /* Tagline — the signature thin-weight whisper */ [data-theme="verge"] .tier__tagline { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 300; font-size: 20px; letter-spacing: 1.9px; text-transform: uppercase; color: #ffffff; opacity: 1; margin: 0 0 32px 0; padding-bottom: 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="verge"] .tier--featured .tier__tagline { border-bottom: 1px solid rgba(255, 255, 255, 0.2); } /* Features */ [data-theme="verge"] .tier__features { gap: 14px; margin: 0 0 40px 0; } [data-theme="verge"] .tier__features li { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 1px; line-height: 1.5; text-transform: uppercase; color: #ffffff; border-bottom: none; } [data-theme="verge"] .tier__mark { color: #3cffd0; font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 700; font-size: 16px; opacity: 1; } [data-theme="verge"] .tier--featured .tier__mark { color: #3cffd0; } /* FAQ */ [data-theme="verge"] .faq__list { border-top: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="verge"] .faq__item { border-bottom: 1px solid rgba(255, 255, 255, 0.15); padding: 32px 0; } [data-theme="verge"] .faq__q { font-family: "Archivo Black", Impact, Helvetica, sans-serif; font-weight: 900; font-size: 24px; line-height: 1.1; letter-spacing: 0; text-transform: uppercase; color: #ffffff; margin: 0 0 12px 0; } [data-theme="verge"] .faq__a { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6; letter-spacing: 0; text-transform: none; color: #ffffff; opacity: 0.85; } /* ========================================================================= 4) FEATURES PAGE — StoryStream timeline treatment ========================================================================= */ [data-theme="verge"] .feature-intro, [data-theme="verge"] .feature-outro { background: #131313; } [data-theme="verge"] .feature-intro__grid { background-image: linear-gradient(rgba(60, 255, 208, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(60, 255, 208, 0.06) 1px, transparent 1px); } /* Feature section becomes a rounded card on the timeline */ [data-theme="verge"] .feature { position: relative; background: #131313; border: 1px solid #ffffff; border-radius: 24px; padding: 48px 48px 48px 72px; margin: 16px 32px; border-top: 1px solid #ffffff; min-height: auto; gap: 48px; } /* Timeline rail — 1px solid purple running the height */ [data-theme="verge"] .feature::before { content: ""; position: absolute; top: 24px; bottom: 24px; left: 36px; width: 1px; background: #3d00bf; pointer-events: none; } /* Mint timestamp dot on the rail, anchored to eyebrow */ [data-theme="verge"] .feature .eyebrow { position: relative; font-family: "Space Mono", "Courier New", Courier, monospace; font-size: 11px; font-weight: 500; letter-spacing: 1.1px; text-transform: uppercase; color: #3cffd0; opacity: 1; padding-left: 0; } [data-theme="verge"] .feature .eyebrow::before { content: ""; position: absolute; top: 50%; left: -44px; width: 8px; height: 8px; border-radius: 50%; background: #3cffd0; transform: translateY(-50%); } /* Right-variant: simplify to left-aligned to preserve true timeline feel */ [data-theme="verge"] .feature.feature--right { grid-template-columns: 1fr 1fr; } [data-theme="verge"] .feature.feature--right .feature__content { order: 1; justify-self: end; text-align: left; padding-left: 0; padding-right: 24px; } [data-theme="verge"] .feature.feature--right .feature__visual { order: 2; padding-left: 24px; padding-right: 0; } [data-theme="verge"] .feature.feature--right .feature__content .support { margin-left: 0; } /* Feature headline — Archivo Black hero */ [data-theme="verge"] .feature__headline { font-family: "Archivo Black", Impact, Helvetica, sans-serif; font-weight: 900; font-size: clamp(40px, 6vw, 72px); line-height: 0.9; letter-spacing: 0; text-transform: uppercase; color: #ffffff; margin: 0 0 24px 0; } /* Support copy on feature */ [data-theme="verge"] .feature .support { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 500; font-size: 16px; line-height: 1.6; letter-spacing: 0; text-transform: uppercase; color: #ffffff; opacity: 0.95; } /* Feature fact — mint pill tag */ [data-theme="verge"] .feature__fact { display: inline-block; font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 600; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #3cffd0; background: transparent; border: 1px solid #3cffd0; border-radius: 20px; padding: 8px 16px; margin-top: 16px; opacity: 1; border-top: 1px solid #3cffd0; } /* Visual 01 — transaction grid: keep white-opacity squares */ [data-theme="verge"] .visual-grid span { background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 2px; } [data-theme="verge"] .visual-grid span:nth-child(2), [data-theme="verge"] .visual-grid span:nth-child(5), [data-theme="verge"] .visual-grid span:nth-child(9), [data-theme="verge"] .visual-grid span:nth-child(14), [data-theme="verge"] .visual-grid span:nth-child(19), [data-theme="verge"] .visual-grid span:nth-child(22), [data-theme="verge"] .visual-grid span:nth-child(28), [data-theme="verge"] .visual-grid span:nth-child(33), [data-theme="verge"] .visual-grid span:nth-child(37), [data-theme="verge"] .visual-grid span:nth-child(44), [data-theme="verge"] .visual-grid span:nth-child(47), [data-theme="verge"] .visual-grid span:nth-child(51), [data-theme="verge"] .visual-grid span:nth-child(55), [data-theme="verge"] .visual-grid span:nth-child(58), [data-theme="verge"] .visual-grid span:nth-child(62) { background: #ffffff; border-color: #ffffff; } [data-theme="verge"] .visual-grid span:nth-child(3), [data-theme="verge"] .visual-grid span:nth-child(11), [data-theme="verge"] .visual-grid span:nth-child(17), [data-theme="verge"] .visual-grid span:nth-child(26), [data-theme="verge"] .visual-grid span:nth-child(31), [data-theme="verge"] .visual-grid span:nth-child(40), [data-theme="verge"] .visual-grid span:nth-child(49), [data-theme="verge"] .visual-grid span:nth-child(60) { background: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.6); } [data-theme="verge"] .visual-grid span:nth-child(7), [data-theme="verge"] .visual-grid span:nth-child(15), [data-theme="verge"] .visual-grid span:nth-child(24), [data-theme="verge"] .visual-grid span:nth-child(35), [data-theme="verge"] .visual-grid span:nth-child(42), [data-theme="verge"] .visual-grid span:nth-child(53) { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.35); } /* Visual 02 — pattern line graph: mint stroke, ultraviolet pulses */ [data-theme="verge"] .visual-graph { background: #131313; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; } [data-theme="verge"] .visual-graph svg path[stroke="#f0f0fa"], [data-theme="verge"] .visual-graph svg path:not([fill^="url"]) { stroke: #3cffd0; } [data-theme="verge"] .visual-graph svg .pulse-dot > circle { fill: #5200ff; stroke: #5200ff; } [data-theme="verge"] .visual-graph svg .pulse-dot > circle:last-child { fill: none; stroke: #5200ff; stroke-opacity: 0.7; } /* Visual 03 — chat bubbles: mint + white + ultraviolet */ [data-theme="verge"] .chat-bubble { font-family: "Space Grotesk", Helvetica, Arial, sans-serif; font-weight: 700; font-size: 14px; letter-spacing: 0.5px; padding: 14px 20px; border-radius: 20px; } [data-theme="verge"] .chat-bubble--you { background: #3cffd0; color: #000000; border: none; border-bottom-right-radius: 4px; } [data-theme="verge"] .chat-bubble--zeni { background: #ffffff; color: #131313; border: none; border-bottom-left-radius: 4px; } [data-theme="verge"] .visual-chat .chat-bubble:nth-child(3), [data-theme="verge"] .visual-chat .chat-bubble--you ~ .chat-bubble--you { background: #5200ff; color: #ffffff; border: none; border-bottom-right-radius: 4px; } /* Visual 04 — goal ring: mint fill */ [data-theme="verge"] .ring { background: conic-gradient( #3cffd0 0 68%, rgba(255, 255, 255, 0.1) 68% 100% ); } [data-theme="verge"] .ring::before { background: #131313; } [data-theme="verge"] .ring__label { font-family: "Archivo Black", Impact, Helvetica, sans-serif; font-weight: 900; color: #ffffff; letter-spacing: 0; } [data-theme="verge"] .ring__value { font-size: clamp(48px, 6vw, 72px); } [data-theme="verge"] .ring__pct { font-family: "Space Mono", "Courier New", Courier, monospace; font-weight: 600; color: #3cffd0; opacity: 1; } /* Visual 05 — account aggregation bars */ [data-theme="verge"] .bar { background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 20px; height: 36px; } [data-theme="verge"] .bar__fill { background: #3cffd0; } /* Visual 06 — privacy nested rings */ [data-theme="verge"] .lock-ring { border: 1px solid #ffffff; } [data-theme="verge"] .lock-ring--1 { opacity: 0.35; } [data-theme="verge"] .lock-ring--2 { opacity: 0.55; } [data-theme="verge"] .lock-ring--3 { opacity: 0.8; border-color: #ffffff; } [data-theme="verge"] .lock-dot { background: #3cffd0; box-shadow: none; } /* ========================================================================= RESPONSIVE — Verge-flavored tweaks ========================================================================= */ @media (max-width: 900px) { [data-theme="verge"] .feature { grid-template-columns: 1fr; margin: 12px 16px; padding: 32px 24px 32px 56px; gap: 32px; } [data-theme="verge"] .feature::before { left: 28px; } [data-theme="verge"] .feature .eyebrow::before { left: -36px; } [data-theme="verge"] .feature.feature--right .feature__content, [data-theme="verge"] .feature .feature__content { order: 1; justify-self: start; text-align: left; padding: 0; } [data-theme="verge"] .feature.feature--right .feature__visual, [data-theme="verge"] .feature .feature__visual { order: 2; padding: 0; } [data-theme="verge"] .tier { padding: 32px 24px; } [data-theme="verge"] .tier--featured .tier__eyebrow { margin-top: 36px; } } @media (max-width: 768px) { [data-theme="verge"] .mockup__frame { border-radius: 20px; padding: 16px; } [data-theme="verge"] .mockup__amount { font-size: 40px; } [data-theme="verge"] .tier__price { font-size: clamp(40px, 10vw, 56px); } [data-theme="verge"] .tier__tagline { font-size: 16px; letter-spacing: 1.6px; } [data-theme="verge"] .faq__q { font-size: 20px; } [data-theme="verge"] .feature__headline { font-size: clamp(32px, 8vw, 48px); } } /* ========================================================================= REDUCED MOTION — respect user preference for any animated overrides ========================================================================= */ @media (prefers-reduced-motion: reduce) { [data-theme="verge"] .mockup__txn, [data-theme="verge"] .ask__prompt, [data-theme="verge"] .ask__input, [data-theme="verge"] .tier, [data-theme="verge"] .mockup__txn-name { transition: none; } }