/* Custom design tokens & components (ported from the Next.js globals.css). Tailwind utilities come from the CDN loaded in the page . */ @keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} } @keyframes fadeUp { from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:translateY(0)} } @keyframes fadeIn { from{opacity:0} to{opacity:1} } @keyframes shimmer { 0%{background-position:-200% 0} 100%{background-position:200% 0} } .skeleton { background: linear-gradient(100deg,#eef1f5 30%,#f8fafc 50%,#eef1f5 70%); background-size: 200% 100%; animation: shimmer 1.05s ease-in-out infinite; border-radius: 0.5rem; } :root { --bg-base:#f8fafc; --bg-card:#fff; --card-border:rgba(0,0,0,0.08); --brand:#1ab37c; --brand-dim:rgba(26,179,124,0.12); --text-muted:#94a3b8; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { background-color:var(--bg-base); color:#0f172a; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; margin:0; } ::-webkit-scrollbar { width:6px; height:6px; } ::-webkit-scrollbar-track { background:#f1f5f9; } ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:3px; } ::-webkit-scrollbar-thumb:hover { background:#1ab37c; } ::selection { background:rgba(26,179,124,0.25); color:#0f172a; } .glass { background:rgba(255,255,255,0.85); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(0,0,0,0.07); box-shadow:0 1px 3px rgba(0,0,0,0.06),0 1px 2px rgba(0,0,0,0.04); } .glass-light { background:rgba(255,255,255,0.7); backdrop-filter:blur(10px); border:1px solid rgba(0,0,0,0.08); } .gradient-text-brand { background:linear-gradient(135deg,#0d7352,#1ab37c); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; } .btn-primary { display:inline-flex; align-items:center; gap:0.5rem; padding:0.75rem 1.75rem; background:linear-gradient(135deg,#1ab37c,#0d7352); color:#fff; font-weight:600; border-radius:0.5rem; transition:all 0.2s ease; border:1px solid rgba(13,115,82,0.2); box-shadow:0 2px 8px rgba(26,179,124,0.25); cursor:pointer; text-decoration:none; } .btn-primary:hover { transform:translateY(-1px); box-shadow:0 4px 16px rgba(26,179,124,0.35); } .btn-outline { display:inline-flex; align-items:center; gap:0.5rem; padding:0.75rem 1.75rem; background:transparent; color:#0d7352; font-weight:600; border-radius:0.5rem; transition:all 0.2s ease; border:1.5px solid rgba(26,179,124,0.5); cursor:pointer; text-decoration:none; } .btn-outline:hover { background:rgba(26,179,124,0.07); border-color:#1ab37c; } .card-hover { transition:transform 0.2s ease,box-shadow 0.2s ease,border-color 0.2s ease; } .card-hover:hover { transform:translateY(-3px); border-color:rgba(26,179,124,0.35)!important; box-shadow:0 12px 32px rgba(0,0,0,0.08),0 0 0 1px rgba(26,179,124,0.12); } .data-table { width:100%; border-collapse:collapse; } .data-table th { background:rgba(26,179,124,0.08); color:#0d7352; font-weight:600; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.05em; padding:0.75rem 1rem; text-align:left; border-bottom:1px solid rgba(0,0,0,0.07); } .data-table td { padding:0.875rem 1rem; border-bottom:1px solid rgba(0,0,0,0.05); color:#374151; font-size:0.9rem; } .data-table tr:hover td { background:rgba(26,179,124,0.04); } .page-hero { background:linear-gradient(135deg,#f0fdf9 0%,#f8fafc 50%,#f0fdf4 100%); border-bottom:1px solid rgba(26,179,124,0.15); position:relative; overflow:hidden; } .page-hero::before { content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle at 30% 30%,rgba(26,179,124,0.1) 0%,transparent 55%); pointer-events:none; } .admin-input, .admin-textarea { width:100%; padding:0.625rem 0.875rem; background:#fff; border:1.5px solid #e2e8f0; border-radius:0.5rem; color:#0f172a; font-size:0.9rem; transition:border-color 0.2s; outline:none; } .admin-textarea { resize:vertical; min-height:80px; } .admin-input::placeholder, .admin-textarea::placeholder { color:#94a3b8; } .admin-input:focus, .admin-textarea:focus { border-color:#1ab37c; box-shadow:0 0 0 2px rgba(26,179,124,0.15); } .form-input, .form-textarea { width:100%; padding:0.625rem 0.875rem; background:#fff; border:1.5px solid #e2e8f0; border-radius:0.5rem; color:#0f172a; font-size:0.9rem; transition:border-color 0.2s,box-shadow 0.2s; outline:none; } .form-textarea { resize:vertical; min-height:80px; } .form-input:focus, .form-textarea:focus { border-color:#1ab37c; box-shadow:0 0 0 3px rgba(26,179,124,0.1); }