/* * Yieldly DeFi design tokens — applied globally on `body.yieldly`. * Tokens stay scoped under `.yieldly` so the file is self-contained, but the * shell (base.html) puts that class on , so every page receives the * design. Bootstrap-class overrides below ensure templates that haven't been * explicitly rewritten with `yl-*` markup still render in the new style. */ .yieldly { /* Core palette — Yieldly Design System v1.0 */ --yl-bull: #3FCF8E; --yl-bull-deep: #1FA372; --yl-bear: #E8556B; --yl-bear-deep: #B83A4F; --yl-warn: #FFB547; --yl-warn-deep: #FF8A1F; --yl-info: #22D3EE; --yl-info-deep: #6366F1; /* Canvas */ --yl-void: #08090C; --yl-bg: #0B0D12; --yl-bg-deep: #06080C; --yl-solid: #10131A; /* Text scale */ --yl-text-100: #ffffff; --yl-text-65: rgba(255, 255, 255, 0.65); --yl-text-40: rgba(255, 255, 255, 0.40); --yl-text-dim: rgba(255, 255, 255, 0.25); /* Surface scale */ --yl-surface-2: rgba(255, 255, 255, 0.02); --yl-surface-4: rgba(255, 255, 255, 0.04); --yl-surface-7: rgba(255, 255, 255, 0.07); --yl-surface-12: rgba(255, 255, 255, 0.12); --yl-border: rgba(255, 255, 255, 0.08); --yl-border-strong: rgba(255, 255, 255, 0.14); /* Gradients */ --yl-grad-bull: linear-gradient(135deg, #3FCF8E 0%, #1FA372 100%); --yl-grad-bear: linear-gradient(135deg, #E8556B 0%, #B83A4F 100%); --yl-grad-warn: linear-gradient(135deg, #FFB547 0%, #FF8A1F 100%); --yl-grad-pancake: linear-gradient(135deg, #1FC7D4 0%, #7645D9 100%); --yl-grad-candy: linear-gradient(135deg, #FF4D8F 0%, #8B5CF6 100%); --yl-grad-ocean: linear-gradient(135deg, #22D3EE 0%, #6366F1 100%); --yl-grad-sunset: linear-gradient(135deg, #FFB547 0%, #FF4D8F 100%); --yl-grad-matrix: linear-gradient(135deg, #39E991 0%, #06B6D4 100%); /* Glows */ --yl-glow-bull: 0 8px 24px -8px rgba(63, 207, 142, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); --yl-glow-bear: 0 8px 24px -8px rgba(232, 85, 107, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.2); /* Radii */ --yl-r-8: 8px; --yl-r-14: 14px; --yl-r-16: 16px; --yl-r-18: 18px; --yl-r-22: 22px; --yl-r-24: 24px; /* Typography */ --yl-font-sans: 'Space Grotesk', -apple-system, system-ui, sans-serif; --yl-font-mono: 'JetBrains Mono', ui-monospace, monospace; } /* Page shell when `.yieldly` is on body — design system background. */ body.yieldly { font-family: var(--yl-font-sans); color: var(--yl-text-100); -webkit-font-smoothing: antialiased; background: radial-gradient(ellipse 50% 60% at 0% 10%, rgba(63, 207, 142, 0.13) 0%, transparent 55%), radial-gradient(ellipse 50% 60% at 100% 90%, rgba(232, 85, 107, 0.13) 0%, transparent 55%), radial-gradient(circle at 50% 50%, var(--yl-bg) 0%, var(--yl-bg-deep) 100%); background-attachment: fixed; min-height: 100vh; padding-bottom: 96px; /* space for bottom_navbar */ } /* Headings — let the cyberpunk dark-theme.css's neon-green default lose. */ .yieldly h1, .yieldly h2, .yieldly h3, .yieldly h4, .yieldly h5, .yieldly h6 { color: var(--yl-text-100); font-family: var(--yl-font-sans); letter-spacing: -0.5px; } .yieldly p, .yieldly span, .yieldly div, .yieldly li, .yieldly label, .yieldly small, .yieldly strong, .yieldly th, .yieldly td { font-family: inherit; } /* Bootstrap text-* helpers — recolor against Yieldly palette. */ .yieldly .text-success { color: var(--yl-bull) !important; } .yieldly .text-danger { color: var(--yl-bear) !important; } .yieldly .text-warning { color: var(--yl-warn) !important; } .yieldly .text-info { color: var(--yl-info) !important; } .yieldly .text-primary { color: var(--yl-text-100) !important; } .yieldly .text-muted { color: var(--yl-text-65) !important; } .yieldly .text-secondary { color: var(--yl-text-65) !important; } .yieldly .text-light, .yieldly .text-white { color: var(--yl-text-100) !important; } .yieldly .text-dark { color: var(--yl-text-100) !important; } /* Bootstrap bg-* helpers — translucent surfaces. */ .yieldly .bg-dark, .yieldly .bg-body, .yieldly .bg-secondary { background: var(--yl-surface-4) !important; } .yieldly .bg-success { background: var(--yl-grad-bull) !important; color: #04240F !important; } .yieldly .bg-danger { background: var(--yl-grad-bear) !important; color: #fff !important; } .yieldly .bg-warning { background: var(--yl-grad-warn) !important; color: #1A0F00 !important; } .yieldly .bg-info { background: rgba(34, 211, 238, 0.18) !important; color: var(--yl-info) !important; } .yieldly .bg-primary { background: var(--yl-grad-bull) !important; color: #04240F !important; } /* Bootstrap border helpers. */ .yieldly .border, .yieldly .border-secondary, .yieldly .border-dark { border-color: var(--yl-border) !important; } .yieldly .border-success { border-color: rgba(63, 207, 142, 0.40) !important; } .yieldly .border-danger { border-color: rgba(232, 85, 107, 0.40) !important; } .yieldly .border-warning { border-color: rgba(255, 181, 71, 0.40) !important; } .yieldly .border-info { border-color: rgba(34, 211, 238, 0.40) !important; } .yieldly .border-top, .yieldly .border-bottom, .yieldly .border-start, .yieldly .border-end { border-color: var(--yl-border) !important; } /* Cards — glass surfaces. */ .yieldly .card { background: var(--yl-surface-4); border: 1px solid var(--yl-border); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: var(--yl-r-22); color: var(--yl-text-100); overflow: hidden; } .yieldly .card-header { background: var(--yl-surface-2); border-bottom: 1px solid var(--yl-border); color: var(--yl-text-100); font-weight: 600; } .yieldly .card-footer { background: var(--yl-surface-2); border-top: 1px solid var(--yl-border); color: var(--yl-text-65); } .yieldly .card-title { color: var(--yl-text-100); font-weight: 600; } .yieldly .card-body { color: var(--yl-text-100); } /* Bootstrap buttons — Yieldly styling. */ .yieldly .btn { font-family: var(--yl-font-sans); font-weight: 600; border-radius: var(--yl-r-14); transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; border-width: 1px; } .yieldly .btn:disabled, .yieldly .btn.disabled { opacity: 0.4; box-shadow: none; } .yieldly .btn-primary, .yieldly .btn-success { background: var(--yl-grad-bull); border-color: transparent; color: #04240F; box-shadow: var(--yl-glow-bull); } .yieldly .btn-primary:hover:not(:disabled), .yieldly .btn-success:hover:not(:disabled) { background: var(--yl-grad-bull); color: #04240F; transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(63, 207, 142, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); } .yieldly .btn-danger { background: var(--yl-grad-bear); border-color: transparent; color: #fff; box-shadow: var(--yl-glow-bear); } .yieldly .btn-danger:hover:not(:disabled) { background: var(--yl-grad-bear); transform: translateY(-1px); } .yieldly .btn-warning { background: var(--yl-grad-warn); border-color: transparent; color: #1A0F00; } .yieldly .btn-info { background: rgba(34, 211, 238, 0.2); border-color: rgba(34, 211, 238, 0.4); color: var(--yl-info); } .yieldly .btn-secondary, .yieldly .btn-dark { background: var(--yl-surface-7); border-color: var(--yl-border-strong); color: var(--yl-text-100); } .yieldly .btn-secondary:hover:not(:disabled), .yieldly .btn-dark:hover:not(:disabled) { background: var(--yl-surface-12); color: var(--yl-text-100); } .yieldly .btn-outline-primary, .yieldly .btn-outline-success { background: transparent; border: 1px solid rgba(63, 207, 142, 0.4); color: var(--yl-bull); } .yieldly .btn-outline-primary:hover:not(:disabled), .yieldly .btn-outline-success:hover:not(:disabled) { background: rgba(63, 207, 142, 0.13); color: var(--yl-bull); border-color: rgba(63, 207, 142, 0.6); } .yieldly .btn-outline-danger { background: transparent; border: 1px solid rgba(232, 85, 107, 0.4); color: var(--yl-bear); } .yieldly .btn-outline-danger:hover:not(:disabled) { background: rgba(232, 85, 107, 0.13); color: var(--yl-bear); } .yieldly .btn-outline-secondary, .yieldly .btn-outline-dark, .yieldly .btn-outline-light { background: transparent; border: 1px solid var(--yl-border-strong); color: var(--yl-text-100); } .yieldly .btn-outline-secondary:hover:not(:disabled), .yieldly .btn-outline-dark:hover:not(:disabled), .yieldly .btn-outline-light:hover:not(:disabled) { background: var(--yl-surface-7); color: var(--yl-text-100); } .yieldly .btn-outline-info { background: transparent; border: 1px solid rgba(34, 211, 238, 0.4); color: var(--yl-info); } .yieldly .btn-outline-warning { background: transparent; border: 1px solid rgba(255, 181, 71, 0.4); color: var(--yl-warn); } /* Form controls. */ .yieldly .form-control, .yieldly .form-select { background: var(--yl-surface-4); border: 1px solid var(--yl-border-strong); color: var(--yl-text-100); border-radius: var(--yl-r-14); padding: 0.6rem 0.9rem; } .yieldly .form-control:focus, .yieldly .form-select:focus { background: var(--yl-surface-7); border-color: rgba(63, 207, 142, 0.6); color: var(--yl-text-100); box-shadow: 0 0 0 3px rgba(63, 207, 142, 0.15); outline: none; } .yieldly .form-control::placeholder { color: var(--yl-text-dim); } .yieldly .form-label { font-family: var(--yl-font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--yl-text-40); font-weight: 500; } .yieldly .form-check-input { background-color: var(--yl-surface-7); border-color: var(--yl-border-strong); } .yieldly .form-check-input:checked { background-color: var(--yl-bull); border-color: var(--yl-bull); } .yieldly .input-group-text { background: var(--yl-surface-7); border-color: var(--yl-border-strong); color: var(--yl-text-65); } /* Tables. */ .yieldly .table { --bs-table-bg: transparent; --bs-table-color: var(--yl-text-100); --bs-table-striped-bg: var(--yl-surface-2); --bs-table-striped-color: var(--yl-text-100); --bs-table-hover-bg: var(--yl-surface-7); --bs-table-hover-color: var(--yl-text-100); --bs-table-border-color: var(--yl-border); color: var(--yl-text-100); border-color: var(--yl-border); } .yieldly .table thead th, .yieldly .table > :not(caption) > * > * { background-color: transparent; color: inherit; } .yieldly .table thead th { font-family: var(--yl-font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--yl-text-40); font-weight: 500; border-bottom: 1px solid var(--yl-border); background: var(--yl-surface-2); } .yieldly .table tbody td { border-bottom: 1px solid var(--yl-border); vertical-align: middle; font-variant-numeric: tabular-nums; } .yieldly .table-dark, .yieldly .table-dark > th, .yieldly .table-dark > td { --bs-table-bg: transparent; background-color: transparent !important; color: var(--yl-text-100); } /* Badges — pill-shaped chips. */ .yieldly .badge { font-family: var(--yl-font-sans); font-weight: 600; font-size: 11px; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.2px; } /* Alerts. */ .yieldly .alert { background: var(--yl-surface-4); border: 1px solid var(--yl-border-strong); border-radius: var(--yl-r-16); color: var(--yl-text-100); } .yieldly .alert-success { background: rgba(63, 207, 142, 0.10); border-color: rgba(63, 207, 142, 0.40); color: var(--yl-bull); } .yieldly .alert-danger { background: rgba(232, 85, 107, 0.10); border-color: rgba(232, 85, 107, 0.40); color: var(--yl-bear); } .yieldly .alert-warning { background: rgba(255, 181, 71, 0.10); border-color: rgba(255, 181, 71, 0.40); color: var(--yl-warn); } .yieldly .alert-info { background: rgba(34, 211, 238, 0.10); border-color: rgba(34, 211, 238, 0.40); color: var(--yl-info); } /* Bootstrap nav tabs / pills. */ .yieldly .nav-link { color: var(--yl-text-65); font-family: var(--yl-font-sans); } .yieldly .nav-link:hover { color: var(--yl-text-100); } .yieldly .nav-link.active { color: var(--yl-text-100); background: var(--yl-surface-7); border-radius: var(--yl-r-14); } .yieldly .nav-tabs { border-color: var(--yl-border); } .yieldly .nav-tabs .nav-link { border-color: transparent; color: var(--yl-text-65); } .yieldly .nav-tabs .nav-link.active { background: transparent; color: var(--yl-bull); border-bottom: 2px solid var(--yl-bull); } /* Pagination. */ .yieldly .page-link { background: var(--yl-surface-4) !important; border-color: var(--yl-border) !important; color: var(--yl-text-100) !important; font-family: var(--yl-font-sans); } .yieldly .page-link:hover { background: var(--yl-surface-7) !important; color: var(--yl-text-100) !important; } .yieldly .page-item.active .page-link { background: var(--yl-grad-bull) !important; border-color: transparent !important; color: #04240F !important; } .yieldly .page-item.disabled .page-link { background: var(--yl-surface-2) !important; color: var(--yl-text-40) !important; } /* Modal — opaque so the body gradient doesn't bleed through. */ .yieldly .modal-content { background: #10131A; border: 1px solid var(--yl-border-strong); border-radius: var(--yl-r-22); color: var(--yl-text-100); box-shadow: 0 24px 64px -24px rgba(0, 0, 0, 0.7); overflow: hidden; } .yieldly .modal-content .yl-card, .yieldly .modal-content .yl-subcard { /* Cards inside modals lose their orb / glow so the modal stays calm. */ background: var(--yl-surface-4); } .yieldly .modal-content .yl-card-orb-green::before, .yieldly .modal-content .yl-card-orb-red::after { display: none; } .yieldly .modal-header { border-bottom: 1px solid var(--yl-border); padding: 16px 20px; } .yieldly .modal-header .modal-title { font-size: 15px; font-weight: 600; letter-spacing: -0.2px; } .yieldly .modal-body { padding: 20px; } .yieldly .modal-footer { border-top: 1px solid var(--yl-border); } .yieldly .btn-close { filter: invert(1) opacity(0.6); } .yieldly .modal-backdrop.show { opacity: 0.7; } /* List groups. */ .yieldly .list-group-item { background: var(--yl-surface-4); border-color: var(--yl-border); color: var(--yl-text-100); } /* Dropdowns. */ .yieldly .dropdown-menu { background: var(--yl-surface-7); border: 1px solid var(--yl-border-strong); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border-radius: var(--yl-r-14); } .yieldly .dropdown-item { color: var(--yl-text-100); } .yieldly .dropdown-item:hover, .yieldly .dropdown-item:focus { background: var(--yl-surface-7); color: var(--yl-text-100); } .yieldly .dropdown-divider { border-color: var(--yl-border); } /* Progress bars. */ .yieldly .progress { background: var(--yl-surface-7); border-radius: 999px; height: 8px; } .yieldly .progress-bar { background: var(--yl-grad-bull); border-radius: 999px; } /* Spinners. */ .yieldly .spinner-border, .yieldly .spinner-grow { color: var(--yl-bull); } /* ─────── Yieldly explicit utility classes (for hand-coded Yieldly UI) ─────── */ .yieldly .yl-page { max-width: 520px; margin: 0 auto; padding: 24px 16px 32px; display: flex; flex-direction: column; gap: 14px; } .yieldly .yl-page-wide { max-width: 920px; margin: 0 auto; padding: 24px 16px 32px; } /* Glass card. */ .yieldly .yl-card { background: var(--yl-surface-4); border: 1px solid var(--yl-border); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-radius: var(--yl-r-24); padding: 20px; position: relative; overflow: hidden; } .yieldly .yl-card.is-stake { border: 2px solid rgba(63, 207, 142, 0.30); box-shadow: 0 0 24px -8px rgba(63, 207, 142, 0.50); } .yieldly .yl-card.is-renew { border: 1px solid rgba(232, 85, 107, 0.40); } .yieldly .yl-card-orb-green::before, .yieldly .yl-card-orb-red::after { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 999px; pointer-events: none; filter: blur(50px); } .yieldly .yl-card-orb-green::before { top: -50px; left: -50px; background: var(--yl-bull); opacity: 0.18; } .yieldly .yl-card-orb-red::after { bottom: -50px; right: -50px; background: var(--yl-bear); opacity: 0.16; } /* Typography helpers. */ .yieldly .yl-mono { font-family: var(--yl-font-mono); } .yieldly .yl-tabular { font-variant-numeric: tabular-nums; } .yieldly .yl-label { font-family: var(--yl-font-mono); font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--yl-text-40); } .yieldly .yl-grad-text { background: var(--yl-grad-bull); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .yieldly .yl-grad-text-bear { background: var(--yl-grad-bear); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .yieldly .yl-text-muted { color: var(--yl-text-65); } .yieldly .yl-text-dim { color: var(--yl-text-40); } .yieldly .yl-bull { color: var(--yl-bull); } .yieldly .yl-bear { color: var(--yl-bear); } .yieldly .yl-warn { color: var(--yl-warn); } /* Hero numbers. */ .yieldly .yl-hero { font-size: 56px; font-weight: 700; letter-spacing: -2px; line-height: 1; font-variant-numeric: tabular-nums; } .yieldly .yl-hero-md { font-size: 36px; font-weight: 700; letter-spacing: -1px; line-height: 1; font-variant-numeric: tabular-nums; } .yieldly .yl-hero-sm { font-size: 24px; font-weight: 700; letter-spacing: -0.5px; line-height: 1.1; font-variant-numeric: tabular-nums; } /* Buttons (yl-btn). */ .yieldly .yl-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 20px; border-radius: var(--yl-r-16); font-family: var(--yl-font-sans); font-size: 15px; font-weight: 600; color: var(--yl-text-100); border: none; cursor: pointer; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; } .yieldly .yl-btn-block { width: 100%; } .yieldly .yl-btn-sm { height: 40px; padding: 0 16px; border-radius: var(--yl-r-14); font-size: 14px; } .yieldly .yl-btn:disabled, .yieldly .yl-btn.is-disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; } .yieldly .yl-btn-grad { background: var(--yl-grad-bull); color: #04240F; box-shadow: var(--yl-glow-bull); } .yieldly .yl-btn-grad:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 28px -8px rgba(63, 207, 142, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.2); color: #04240F; } .yieldly .yl-btn-glass { background: var(--yl-surface-7); border: 1px solid var(--yl-border-strong); backdrop-filter: blur(20px); } .yieldly .yl-btn-ghost { background: transparent; border: 1px solid var(--yl-border); color: var(--yl-text-100); } .yieldly .yl-btn-danger { background: var(--yl-grad-bear); box-shadow: var(--yl-glow-bear); } /* Chips. */ .yieldly .yl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 500; background: rgba(255, 255, 255, 0.06); color: var(--yl-text-65); border: 1px solid transparent; } .yieldly .yl-chip-bull { background: rgba(63, 207, 142, 0.13); color: var(--yl-bull); border-color: rgba(63, 207, 142, 0.40); } .yieldly .yl-chip-bull-glow { box-shadow: 0 0 16px -4px rgba(63, 207, 142, 0.5); } .yieldly .yl-chip-bear { background: rgba(232, 85, 107, 0.13); color: var(--yl-bear); border-color: rgba(232, 85, 107, 0.40); } .yieldly .yl-chip-warn { background: rgba(255, 181, 71, 0.13); color: #FFB547; border-color: rgba(255, 181, 71, 0.40); } .yieldly .yl-chip-info { background: rgba(34, 211, 238, 0.13); color: var(--yl-info); border-color: rgba(34, 211, 238, 0.40); } /* Pill (countdown / token). */ .yieldly .yl-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid var(--yl-border); font-family: var(--yl-font-mono); font-size: 14px; font-variant-numeric: tabular-nums; color: var(--yl-text-100); } .yieldly .yl-pill.is-warn { color: #FFB547; border-color: rgba(255, 181, 71, 0.40); } .yieldly .yl-pill.is-danger { color: var(--yl-bear); border-color: rgba(232, 85, 107, 0.40); } /* Cap progress bar. */ .yieldly .yl-bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); overflow: hidden; } .yieldly .yl-bar-fill { height: 100%; background: var(--yl-grad-bull); transition: width 0.6s ease; border-radius: 999px; } .yieldly .yl-bar-fill.is-warn { background: linear-gradient(135deg, #FFB547, #FF8A1F); } .yieldly .yl-bar-fill.is-danger { background: var(--yl-grad-bear); } /* Amount card (stake-style). */ .yieldly .yl-amount { display: flex; align-items: center; gap: 12px; } .yieldly .yl-amount-input { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--yl-text-100); font-family: var(--yl-font-sans); font-variant-numeric: tabular-nums; font-size: 36px; font-weight: 700; letter-spacing: -1px; padding: 0; width: 100%; } .yieldly .yl-amount-input::placeholder { color: var(--yl-text-dim); } .yieldly .yl-token-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; background: var(--yl-surface-7); border: 1px solid var(--yl-border); border-radius: 999px; font-size: 13px; font-weight: 600; flex-shrink: 0; } .yieldly .yl-token-dot { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; color: #fff; background: #26A17B; } .yieldly .yl-percent-row { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; } .yieldly .yl-percent { appearance: none; padding: 6px 12px; border-radius: 999px; font-size: 11px; font-weight: 600; background: rgba(255, 255, 255, 0.06); color: var(--yl-text-100); border: 1px solid var(--yl-border); cursor: pointer; font-family: var(--yl-font-sans); } .yieldly .yl-percent.is-max { background: var(--yl-grad-bull); border-color: transparent; box-shadow: var(--yl-glow-bull); color: #04240F; } /* Stat cells. */ .yieldly .yl-stats-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; } .yieldly .yl-stats-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .yieldly .yl-stats-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } @media (max-width: 540px) { .yieldly .yl-stats-4 { grid-template-columns: repeat(2, 1fr); } } .yieldly .yl-stat-label { font-family: var(--yl-font-mono); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--yl-text-40); } .yieldly .yl-stat-value { font-family: var(--yl-font-sans); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 700; letter-spacing: -0.2px; margin-top: 4px; } .yieldly .yl-stat-value.is-lg { font-size: 22px; letter-spacing: -0.5px; } /* Token pip. */ .yieldly .yl-pip { width: 40px; height: 40px; border-radius: 999px; background: var(--yl-grad-bull); display: inline-flex; align-items: center; justify-content: center; color: #040108; font-weight: 700; font-size: 13px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(63, 207, 142, 0.4); } .yieldly .yl-pip.is-bear { background: var(--yl-grad-bear); color: #fff; box-shadow: 0 4px 12px rgba(232, 85, 107, 0.4); } .yieldly .yl-pip.is-warn { background: var(--yl-grad-warn); color: #1A0F00; box-shadow: 0 4px 12px rgba(255, 181, 71, 0.4); } /* Disclaimer / sub-card. */ .yieldly .yl-subcard { background: var(--yl-surface-7); border: 1px solid var(--yl-border-strong); border-radius: var(--yl-r-18); padding: 14px; } .yieldly .yl-checkbox { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--yl-text-65); cursor: pointer; } .yieldly .yl-checkbox input { margin-top: 2px; accent-color: var(--yl-bull); } /* Inline status fragment. */ .yieldly .yl-status { border-radius: var(--yl-r-14); padding: 12px 14px; font-size: 13px; border: 1px solid var(--yl-border); } .yieldly .yl-status.is-success { background: rgba(63, 207, 142, 0.10); border-color: rgba(63, 207, 142, 0.40); color: var(--yl-bull); } .yieldly .yl-status.is-error { background: rgba(232, 85, 107, 0.10); border-color: rgba(232, 85, 107, 0.40); color: var(--yl-bear); } /* Yieldly table. */ .yieldly .yl-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; } .yieldly .yl-table th { font-family: var(--yl-font-mono); font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--yl-text-40); font-weight: 500; text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--yl-border); } .yieldly .yl-table td { padding: 12px; color: var(--yl-text-100); border-bottom: 1px solid var(--yl-border); vertical-align: middle; } .yieldly .yl-table tr:last-child td { border-bottom: none; } .yieldly .yl-table .yl-num { font-variant-numeric: tabular-nums; text-align: right; } /* Filter strip. */ .yieldly .yl-filter-row { display: flex; gap: 6px; flex-wrap: wrap; } .yieldly .yl-filter { padding: 8px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--yl-surface-4); color: var(--yl-text-100); border: 1px solid var(--yl-border); text-decoration: none; font-family: var(--yl-font-sans); } .yieldly .yl-filter.is-active { background: var(--yl-grad-bull); color: #04240F; border-color: transparent; box-shadow: 0 4px 12px -4px rgba(63, 207, 142, 0.5); } /* Section title. */ .yieldly .yl-section-title { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; } .yieldly .yl-section-title h2, .yieldly .yl-section-title h3 { margin: 0; font-size: 16px; font-weight: 700; letter-spacing: -0.3px; } .yieldly .yl-section-title a { font-family: var(--yl-font-mono); font-size: 11px; letter-spacing: 0.8px; text-transform: uppercase; color: var(--yl-text-65); text-decoration: none; } .yieldly .yl-section-title a:hover { color: var(--yl-text-100); } /* Quiet links row. */ .yieldly .yl-quiet-links { display: flex; justify-content: space-between; font-family: var(--yl-font-mono); font-size: 12px; letter-spacing: 0.4px; } .yieldly .yl-quiet-links a { color: var(--yl-text-65); text-decoration: none; } .yieldly .yl-quiet-links a:hover { color: var(--yl-text-100); } /* HTMX-driven join status target. */ .yieldly #join-status:empty { display: none; } /* Auth shell — vertically center auth cards. */ .yieldly .yl-auth-shell { min-height: calc(100vh - 96px); display: flex; align-items: center; justify-content: center; padding: 24px 16px; } .yieldly .yl-auth-card { width: 100%; max-width: 420px; } .yieldly .yl-auth-card .yl-card { padding: 28px; } /* Bottom navbar — Yieldly look (also styled inline in component). */ .yieldly .yl-bottomnav { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; background: rgba(10, 5, 16, 0.78); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); border-top: 1px solid var(--yl-border); } .yieldly .yl-bottomnav-inner { max-width: 520px; margin: 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 8px 8px env(safe-area-inset-bottom, 8px); } .yieldly .yl-bottomnav-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 0; text-decoration: none; color: var(--yl-text-40); font-family: var(--yl-font-mono); font-size: 9px; letter-spacing: 1px; text-transform: uppercase; border-radius: var(--yl-r-14); transition: color 0.15s ease, background 0.15s ease; } .yieldly .yl-bottomnav-link i { font-size: 20px; line-height: 1; } .yieldly .yl-bottomnav-link:hover { color: var(--yl-text-65); } .yieldly .yl-bottomnav-link.is-active { color: var(--yl-bull); } .yieldly .yl-bottomnav-link.is-center { position: relative; } .yieldly .yl-bottomnav-link.is-center i { width: 44px; height: 44px; border-radius: 999px; background: var(--yl-grad-bull); color: #04240F; display: inline-flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 4px; box-shadow: var(--yl-glow-bull); } .yieldly .yl-bottomnav-link.is-center.is-active { color: var(--yl-bull); } .yieldly .yl-bottomnav-link.is-center { color: var(--yl-text-100); } /* HR. */ .yieldly hr { border: 0; border-top: 1px solid var(--yl-border); opacity: 1; margin: 1rem 0; } /* Generic surface helpers. */ .yieldly .yl-surface { background: var(--yl-surface-4); border: 1px solid var(--yl-border); border-radius: var(--yl-r-18); } .yieldly .yl-divider { height: 1px; background: var(--yl-border); margin: 14px 0; } /* Empty state. */ .yieldly .yl-empty { text-align: center; padding: 48px 16px; color: var(--yl-text-40); } .yieldly .yl-empty i { font-size: 56px; display: block; margin-bottom: 12px; opacity: 0.4; }