Spaces:
Sleeping
Sleeping
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| :root { | |
| --teal: #0d9488; | |
| --teal-light: #ccfbf1; | |
| --teal-dark: #0f766e; | |
| --coral: #dc2626; | |
| --coral-light: #fee2e2; | |
| --green: #16a34a; | |
| --green-light: #dcfce7; | |
| --amber: #d97706; | |
| --amber-light: #fef3c7; | |
| --gray-50: #fafafa; | |
| --gray-100: #f5f5f5; | |
| --gray-200: #e5e5e5; | |
| --gray-300: #d4d4d4; | |
| --gray-400: #a3a3a3; | |
| --gray-600: #525252; | |
| --gray-700: #404040; | |
| --gray-800: #262626; | |
| --gray-900: #171717; | |
| --radius: 8px; | |
| --radius-lg: 12px; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: var(--gray-50); | |
| color: var(--gray-900); | |
| line-height: 1.6; | |
| padding: 1.5rem; | |
| } | |
| .hidden { | |
| display: none ; | |
| } | |
| .container { | |
| max-width: 1400px; | |
| margin: 0 auto; | |
| } | |
| /* Header */ | |
| .header { | |
| background: var(--teal); | |
| color: white; | |
| padding: 1.5rem 2rem; | |
| border-radius: var(--radius-lg); | |
| display: flex; | |
| align-items: center; | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .header-copy { | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .header-icon { | |
| font-size: 2.5rem; | |
| background: rgba(255,255,255,0.2); | |
| width: 60px; | |
| height: 60px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius); | |
| flex-shrink: 0; | |
| } | |
| .header h1 { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin-bottom: 0.25rem; | |
| } | |
| .header p { | |
| font-size: 0.95rem; | |
| opacity: 0.95; | |
| } | |
| .github-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 0.45rem; | |
| padding: 0.65rem 0.85rem; | |
| border: 1px solid rgba(255, 255, 255, 0.35); | |
| border-radius: var(--radius); | |
| background: rgba(255, 255, 255, 0.14); | |
| color: white; | |
| font-size: 0.9rem; | |
| font-weight: 700; | |
| text-decoration: none; | |
| transition: all 0.15s; | |
| flex-shrink: 0; | |
| } | |
| .github-link:hover { | |
| background: white; | |
| color: var(--teal-dark); | |
| } | |
| .github-arrow { | |
| font-size: 0.85rem; | |
| } | |
| /* Metrics */ | |
| .metrics { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 1rem; | |
| margin-bottom: 1.5rem; | |
| } | |
| .metric-card { | |
| position: relative; | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius); | |
| padding: 1rem 1.25rem; | |
| } | |
| .metric-label { | |
| font-size: 0.75rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--gray-600); | |
| margin-bottom: 0.5rem; | |
| } | |
| .metric-value { | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| color: var(--gray-900); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .metric-card.status-ongoing .metric-value { color: var(--amber); } | |
| .metric-card.status-accepted .metric-value { color: var(--green); } | |
| .metric-card.status-walked .metric-value { color: var(--coral); } | |
| .product-info-btn { | |
| position: absolute; | |
| top: 0.75rem; | |
| right: 1rem; | |
| width: auto; | |
| padding: 0.45rem 0.7rem; | |
| border: 1.5px solid var(--teal); | |
| border-radius: var(--radius); | |
| background: var(--teal-light); | |
| color: var(--teal-dark); | |
| font-size: 0.85rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .product-info-btn:hover:not(:disabled) { | |
| background: var(--teal); | |
| color: white; | |
| } | |
| .product-info-btn:disabled { | |
| border-color: var(--gray-200); | |
| background: var(--gray-100); | |
| color: var(--gray-400); | |
| cursor: not-allowed; | |
| } | |
| .reward-info-btn { | |
| margin-top: 0; | |
| } | |
| .reward-value.reward-positive { | |
| color: var(--green); | |
| } | |
| .reward-value.reward-negative { | |
| color: var(--coral); | |
| } | |
| .reward-value.reward-neutral { | |
| color: var(--gray-900); | |
| } | |
| /* Controls */ | |
| .controls { | |
| display: flex; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| } | |
| .select { | |
| flex: 1; | |
| padding: 0.75rem 1rem; | |
| border: 1px solid var(--gray-300); | |
| border-radius: var(--radius); | |
| font-size: 0.95rem; | |
| font-weight: 500; | |
| background: white; | |
| color: var(--gray-900); | |
| cursor: pointer; | |
| } | |
| .select:focus { | |
| outline: none; | |
| border-color: var(--teal); | |
| box-shadow: 0 0 0 3px var(--teal-light); | |
| } | |
| .btn { | |
| padding: 0.75rem 1.5rem; | |
| border: none; | |
| border-radius: var(--radius); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .btn-primary { | |
| background: var(--teal); | |
| color: white; | |
| width: 100%; | |
| padding: 1rem; | |
| font-size: 1rem; | |
| margin-top: 0.75rem; | |
| } | |
| .btn-primary:hover { | |
| background: var(--teal-dark); | |
| } | |
| .btn-secondary { | |
| background: white; | |
| color: var(--gray-700); | |
| border: 1px solid var(--gray-300); | |
| } | |
| .btn-secondary:hover { | |
| border-color: var(--teal); | |
| color: var(--teal-dark); | |
| } | |
| .btn:disabled, | |
| .action-btn:disabled, | |
| .offer-ok:disabled { | |
| opacity: 0.6; | |
| cursor: not-allowed; | |
| } | |
| /* Main Layout */ | |
| .main-layout { | |
| display: block; | |
| margin-bottom: 1.5rem; | |
| } | |
| /* Sidebar */ | |
| .sidebar { | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem; | |
| } | |
| .sidebar-title { | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--gray-600); | |
| margin-bottom: 1rem; | |
| } | |
| .action-btn { | |
| width: 100%; | |
| display: flex; | |
| align-items: center; | |
| gap: 0.75rem; | |
| padding: 0.875rem 1rem; | |
| border: 1.5px solid var(--gray-300); | |
| border-radius: var(--radius); | |
| background: white; | |
| cursor: pointer; | |
| margin-bottom: 0.75rem; | |
| transition: all 0.15s; | |
| text-align: left; | |
| } | |
| .response-actions { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.75rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .response-actions .action-btn { | |
| position: relative; | |
| justify-content: center; | |
| margin-bottom: 0; | |
| padding: 0.75rem 0.9rem; | |
| font-weight: 700; | |
| text-align: center; | |
| } | |
| .response-actions .action-btn[data-tooltip]::after { | |
| content: attr(data-tooltip); | |
| position: absolute; | |
| left: 50%; | |
| bottom: calc(100% + 10px); | |
| width: min(240px, 80vw); | |
| padding: 0.6rem 0.7rem; | |
| border-radius: var(--radius); | |
| background: var(--gray-900); | |
| color: white; | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| line-height: 1.35; | |
| text-align: left; | |
| opacity: 0; | |
| pointer-events: none; | |
| transform: translateX(-50%) translateY(4px); | |
| transition: opacity 0.15s, transform 0.15s; | |
| z-index: 5; | |
| } | |
| .response-actions .action-btn[data-tooltip]:hover::after, | |
| .response-actions .action-btn[data-tooltip]:focus-visible::after { | |
| opacity: 1; | |
| transform: translateX(-50%) translateY(0); | |
| } | |
| .response-actions .action-icon { | |
| width: 30px; | |
| height: 30px; | |
| font-size: 1rem; | |
| } | |
| .action-btn:hover { | |
| border-color: var(--teal); | |
| background: var(--teal-light); | |
| } | |
| .action-icon { | |
| width: 36px; | |
| height: 36px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: var(--radius); | |
| font-size: 1.25rem; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .action-offer .action-icon { | |
| background: var(--teal-light); | |
| color: var(--teal-dark); | |
| } | |
| .action-custom .action-icon { | |
| background: var(--amber-light); | |
| color: var(--amber); | |
| } | |
| .action-accept .action-icon { | |
| background: var(--green-light); | |
| color: var(--green); | |
| } | |
| .action-walk .action-icon { | |
| background: var(--coral-light); | |
| color: var(--coral); | |
| } | |
| .action-label { | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: var(--gray-900); | |
| } | |
| .action-sub { | |
| font-size: 0.85rem; | |
| color: var(--gray-600); | |
| } | |
| .offer-input-row { | |
| display: none; | |
| grid-template-columns: auto minmax(0, 1fr) auto; | |
| align-items: center; | |
| gap: 0.5rem; | |
| width: 100%; | |
| padding: 0.625rem; | |
| background: var(--teal-light); | |
| border: 1.5px solid var(--teal); | |
| border-radius: var(--radius); | |
| margin-bottom: 0.75rem; | |
| } | |
| .offer-input-row.open { | |
| display: grid; | |
| } | |
| .dollar-sign { | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--teal-dark); | |
| flex-shrink: 0; | |
| } | |
| #offer-amount { | |
| width: 100%; | |
| min-width: 0; | |
| border: none; | |
| background: transparent; | |
| font-size: 1rem; | |
| font-weight: 600; | |
| color: var(--teal-dark); | |
| outline: none; | |
| } | |
| #offer-amount::placeholder { | |
| color: rgba(15, 118, 110, 0.4); | |
| } | |
| .offer-ok { | |
| flex-shrink: 0; | |
| background: var(--teal); | |
| color: white; | |
| border: none; | |
| padding: 0.45rem 0.7rem; | |
| border-radius: 6px; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| cursor: pointer; | |
| } | |
| .offer-ok:hover { | |
| background: var(--teal-dark); | |
| } | |
| /* Content */ | |
| .content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 1rem; | |
| } | |
| .chat-panel { | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius-lg); | |
| overflow: hidden; | |
| } | |
| .chat-header { | |
| padding: 1rem 1.25rem; | |
| border-bottom: 1px solid var(--gray-200); | |
| background: var(--gray-50); | |
| } | |
| .chat-header h2 { | |
| font-size: 1.05rem; | |
| line-height: 1.25; | |
| color: var(--gray-900); | |
| } | |
| .chat-card { | |
| padding: 1.25rem; | |
| min-height: 380px; | |
| max-height: 620px; | |
| overflow-y: auto; | |
| } | |
| .chat-card:empty::before { | |
| content: 'No messages yet.'; | |
| color: var(--gray-400); | |
| font-style: italic; | |
| } | |
| .chat-product-card { | |
| width: 100%; | |
| margin-bottom: 1.25rem; | |
| padding: 1rem 1.125rem; | |
| border: 1px solid var(--teal-light); | |
| border-radius: var(--radius); | |
| background: linear-gradient(135deg, rgba(204, 251, 241, 0.78), white); | |
| color: var(--gray-800); | |
| } | |
| .chat-product-label { | |
| margin-bottom: 0.25rem; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--teal-dark); | |
| } | |
| .chat-product-title { | |
| margin-bottom: 0.35rem; | |
| font-size: 1rem; | |
| font-weight: 700; | |
| color: var(--gray-900); | |
| } | |
| .chat-product-card p { | |
| font-size: 0.92rem; | |
| line-height: 1.6; | |
| text-align: justify; | |
| } | |
| /* Chat Bubbles */ | |
| .message-row { | |
| display: flex; | |
| gap: 0.75rem; | |
| margin-bottom: 1rem; | |
| align-items: flex-end; | |
| } | |
| .message-row.seller { | |
| flex-direction: row-reverse; | |
| } | |
| .message-avatar { | |
| width: 32px; | |
| height: 32px; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 0.75rem; | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .message-row.seller .message-avatar { | |
| background: var(--teal-light); | |
| color: var(--teal-dark); | |
| } | |
| .message-row.buyer .message-avatar { | |
| background: var(--amber-light); | |
| color: var(--amber); | |
| } | |
| .message-bubble { | |
| max-width: 70%; | |
| padding: 0.875rem 1.125rem; | |
| border-radius: 1rem; | |
| font-size: 0.95rem; | |
| line-height: 1.5; | |
| } | |
| .message-row.seller .message-bubble { | |
| background: var(--gray-100); | |
| color: var(--gray-900); | |
| border-bottom-right-radius: 0.25rem; | |
| } | |
| .message-row.buyer .message-bubble { | |
| background: var(--teal); | |
| color: white; | |
| border-bottom-left-radius: 0.25rem; | |
| } | |
| /* Input Group */ | |
| .input-group { | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius-lg); | |
| padding: 1.25rem; | |
| } | |
| .input-group label { | |
| display: block; | |
| font-size: 0.85rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--gray-600); | |
| margin-bottom: 0.75rem; | |
| } | |
| #buyer-input { | |
| width: 100%; | |
| padding: 0.875rem 1rem; | |
| border: 1.5px solid var(--gray-300); | |
| border-radius: var(--radius); | |
| font-family: 'Inter', sans-serif; | |
| font-size: 0.95rem; | |
| color: var(--gray-900); | |
| resize: vertical; | |
| } | |
| #buyer-input:focus { | |
| outline: none; | |
| border-color: var(--teal); | |
| box-shadow: 0 0 0 3px var(--teal-light); | |
| } | |
| /* Product Info Modal */ | |
| .modal-backdrop { | |
| position: fixed; | |
| inset: 0; | |
| display: none; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 1.5rem; | |
| background: rgba(23, 23, 23, 0.52); | |
| backdrop-filter: blur(4px); | |
| z-index: 50; | |
| } | |
| .modal-backdrop.open { | |
| display: flex; | |
| } | |
| .modal-card { | |
| width: min(900px, 100%); | |
| max-height: min(760px, 90vh); | |
| display: flex; | |
| flex-direction: column; | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius-lg); | |
| box-shadow: 0 24px 80px rgba(23, 23, 23, 0.24); | |
| overflow: hidden; | |
| } | |
| .modal-header { | |
| display: flex; | |
| align-items: flex-start; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| padding: 1.25rem 1.5rem; | |
| background: linear-gradient(135deg, var(--teal), var(--teal-dark)); | |
| color: white; | |
| } | |
| .modal-header .metric-label { | |
| color: rgba(255, 255, 255, 0.78); | |
| } | |
| .modal-header h2 { | |
| font-size: 1.35rem; | |
| line-height: 1.2; | |
| } | |
| .modal-close { | |
| width: 36px; | |
| height: 36px; | |
| border: 1px solid rgba(255, 255, 255, 0.35); | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.16); | |
| color: white; | |
| font-size: 1.5rem; | |
| line-height: 1; | |
| cursor: pointer; | |
| transition: all 0.15s; | |
| } | |
| .modal-close:hover { | |
| background: rgba(255, 255, 255, 0.28); | |
| } | |
| .product-summary { | |
| display: grid; | |
| grid-template-columns: repeat(4, 1fr); | |
| gap: 0.75rem; | |
| padding: 1.25rem 1.5rem; | |
| background: var(--gray-50); | |
| border-bottom: 1px solid var(--gray-200); | |
| } | |
| .product-summary-item { | |
| padding: 0.8rem; | |
| background: white; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius); | |
| } | |
| .product-summary-item span { | |
| display: block; | |
| margin-bottom: 0.25rem; | |
| font-size: 0.72rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--gray-600); | |
| } | |
| .product-summary-item strong { | |
| display: block; | |
| color: var(--gray-900); | |
| font-size: 0.95rem; | |
| line-height: 1.35; | |
| word-break: break-word; | |
| } | |
| .product-summary-item.reward-positive strong { | |
| color: var(--green); | |
| } | |
| .product-summary-item.reward-negative strong { | |
| color: var(--coral); | |
| } | |
| .product-summary-item.reward-neutral strong { | |
| color: var(--gray-900); | |
| } | |
| .product-info-content { | |
| padding: 1.25rem 1.5rem; | |
| background: white; | |
| overflow: auto; | |
| } | |
| .info-group { | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius); | |
| margin-bottom: 0.85rem; | |
| overflow: hidden; | |
| } | |
| .info-group:last-child { | |
| margin-bottom: 0; | |
| } | |
| .info-group summary { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| padding: 0.9rem 1rem; | |
| background: var(--gray-50); | |
| color: var(--gray-900); | |
| cursor: pointer; | |
| list-style: none; | |
| } | |
| .info-group summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .info-group summary::after { | |
| content: '+'; | |
| width: 24px; | |
| height: 24px; | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| border-radius: 50%; | |
| background: var(--teal-light); | |
| color: var(--teal-dark); | |
| font-weight: 700; | |
| flex-shrink: 0; | |
| } | |
| .info-group[open] summary::after { | |
| content: '−'; | |
| } | |
| .info-group summary span { | |
| display: block; | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| } | |
| .info-group summary small { | |
| display: block; | |
| margin-top: 0.15rem; | |
| color: var(--gray-600); | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| } | |
| .info-group-body { | |
| padding: 1rem; | |
| border-top: 1px solid var(--gray-200); | |
| } | |
| .info-group-body h3 { | |
| margin: 1rem 0 0.5rem; | |
| font-size: 0.85rem; | |
| color: var(--teal-dark); | |
| } | |
| .info-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 0.9rem; | |
| } | |
| .info-table tr { | |
| border-bottom: 1px solid var(--gray-100); | |
| } | |
| .info-table tr:last-child { | |
| border-bottom: none; | |
| } | |
| .info-table th, | |
| .info-table td { | |
| padding: 0.65rem 0.5rem; | |
| vertical-align: top; | |
| } | |
| .info-table th { | |
| width: 32%; | |
| color: var(--gray-600); | |
| font-weight: 700; | |
| text-align: left; | |
| } | |
| .info-table td { | |
| color: var(--gray-900); | |
| line-height: 1.45; | |
| word-break: break-word; | |
| } | |
| .info-text-block { | |
| margin-top: 1rem; | |
| padding: 0.9rem; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius); | |
| background: var(--gray-50); | |
| } | |
| .info-text-block h4 { | |
| margin-bottom: 0.4rem; | |
| color: var(--teal-dark); | |
| font-size: 0.85rem; | |
| } | |
| .info-text-block p { | |
| white-space: pre-wrap; | |
| color: var(--gray-800); | |
| font-size: 0.86rem; | |
| line-height: 1.55; | |
| } | |
| .empty-info { | |
| color: var(--gray-600); | |
| } | |
| .reward-component { | |
| padding: 1rem; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius); | |
| margin-bottom: 0.85rem; | |
| background: white; | |
| } | |
| .reward-component:last-child { | |
| margin-bottom: 0; | |
| } | |
| .reward-component.reward-positive { | |
| border-left: 4px solid var(--green); | |
| } | |
| .reward-component.reward-negative { | |
| border-left: 4px solid var(--coral); | |
| } | |
| .reward-component.reward-neutral { | |
| border-left: 4px solid var(--gray-300); | |
| } | |
| .reward-component-header { | |
| display: flex; | |
| justify-content: space-between; | |
| gap: 1rem; | |
| margin-bottom: 0.75rem; | |
| } | |
| .reward-component-header h3 { | |
| margin-bottom: 0.2rem; | |
| font-size: 0.95rem; | |
| color: var(--gray-900); | |
| } | |
| .reward-component-header p { | |
| color: var(--gray-600); | |
| font-size: 0.85rem; | |
| } | |
| .reward-component-header strong { | |
| flex-shrink: 0; | |
| font-size: 1rem; | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .reward-component.reward-positive .reward-component-header strong { | |
| color: var(--green); | |
| } | |
| .reward-component.reward-negative .reward-component-header strong { | |
| color: var(--coral); | |
| } | |
| .reward-metric-grid { | |
| display: grid; | |
| grid-template-columns: repeat(2, minmax(0, 1fr)); | |
| gap: 0.6rem; | |
| } | |
| .reward-metric-item { | |
| padding: 0.7rem; | |
| border: 1px solid var(--gray-200); | |
| border-radius: var(--radius); | |
| background: var(--gray-50); | |
| } | |
| .reward-metric-item span { | |
| display: block; | |
| margin-bottom: 0.2rem; | |
| font-size: 0.7rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| text-transform: uppercase; | |
| color: var(--gray-600); | |
| } | |
| .reward-metric-item strong { | |
| display: block; | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| color: var(--gray-900); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| /* Responsive */ | |
| @media (max-width: 1024px) { | |
| .main-layout { | |
| grid-template-columns: 1fr; | |
| } | |
| .metrics { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .response-actions { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| .product-summary { | |
| grid-template-columns: repeat(2, 1fr); | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| body { | |
| padding: 1rem; | |
| } | |
| .header { | |
| align-items: flex-start; | |
| flex-wrap: wrap; | |
| } | |
| .github-link { | |
| width: 100%; | |
| justify-content: center; | |
| } | |
| .metrics, | |
| .response-actions, | |
| .product-summary { | |
| grid-template-columns: 1fr; | |
| } | |
| .reward-metric-grid { | |
| grid-template-columns: 1fr; | |
| } | |
| .modal-backdrop { | |
| padding: 0.75rem; | |
| } | |
| } | |