/* ============================================================================ Aqrab Design Tokens — canonical cream/amber design language Single source of truth for static satellite sites. Ported from aqrab-website/src/app/globals.css (accent #f59e0b / #d97706) and the proven coef-health static port. Keep in sync with the hub. ============================================================================ */ :root { /* Surfaces (light cream) */ --aqrab-bg-deepest: #FFF8F0; --aqrab-bg-deep: #FFFFFF; --aqrab-bg-card: #FFFFFF; --aqrab-bg-card-hover: #FFFBEB; --aqrab-bg-soft: #FEF3C7; /* Amber accent ramp */ --aqrab-amber: #F59E0B; --aqrab-amber-dark: #D97706; --aqrab-amber-deep: #B45309; --aqrab-amber-glow: rgba(245, 158, 11, 0.12); /* Text */ --aqrab-text: #292524; --aqrab-text-body: #57534E; --aqrab-text-dim: #78716C; /* Lines */ --aqrab-border: #E7E5E4; --aqrab-border-amber: #FDE68A; --aqrab-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---- Reusable component: "Powered by Aqrab" top badge --------------------- Drop … at the top of . */ .aqrab-badge { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 16px; font-family: var(--aqrab-font); font-size: 0.82rem; font-weight: 500; color: var(--aqrab-amber-deep); background: linear-gradient(90deg, var(--aqrab-bg-soft), var(--aqrab-bg-card-hover)); border-bottom: 1px solid var(--aqrab-border-amber); text-decoration: none; transition: background 0.2s; } .aqrab-badge:hover { background: var(--aqrab-bg-soft); text-decoration: none; } .aqrab-badge strong { color: var(--aqrab-amber-deep); font-weight: 700; } .aqrab-badge .aqrab-badge-arrow { transition: transform 0.2s; } .aqrab-badge:hover .aqrab-badge-arrow { transform: translateX(3px); } /* ---- Reusable component: Aqrab CTA band ---------------------------------- */ .aqrab-cta { text-align: center; padding: 40px 28px; border-radius: 16px; background: linear-gradient(135deg, var(--aqrab-amber-glow), transparent 55%), var(--aqrab-bg-card); border: 1px solid var(--aqrab-border-amber); } .aqrab-cta h2 { font-size: 1.5rem; color: var(--aqrab-text); margin-bottom: 10px; } .aqrab-cta p { color: var(--aqrab-text-body); max-width: 560px; margin: 0 auto 20px; } .aqrab-cta .aqrab-cta-btn { display: inline-block; padding: 12px 26px; border-radius: 10px; font-weight: 600; color: #fff; background: var(--aqrab-amber-dark); text-decoration: none; transition: background 0.2s, transform 0.2s; } .aqrab-cta .aqrab-cta-btn:hover { background: var(--aqrab-amber-deep); transform: translateY(-2px); text-decoration: none; }