/* ══════════════════════════════════════════════ Shulker Status — Design System v2 Font: Geist (body + headings) + Geist Mono (code/stats) Dark-first, light mode via .light class on Grafana-inspired charts & data-dense layout ══════════════════════════════════════════════ */ :root { /* Base — Grafana dark palette */ --bg: #111217; --bg-card: #181b1f; --bg-card-hover: #1e2128; --bg-elevated: #22262e; --bg-tooltip: #1c1f26; --border: rgba(255,255,255,.08); --border-hover: rgba(255,255,255,.15); --border-focus: rgba(255,255,255,.22); /* Text */ --text-primary: #d9dce3; --text-secondary:#8b929f; --text-muted: #4d5566; /* Status */ --ok: #73bf69; --ok-bg: rgba(115,191,105,.08); --ok-border: rgba(115,191,105,.2); --warn: #f5a623; --warn-bg: rgba(245,166,35,.08); --warn-border: rgba(245,166,35,.2); --error: #f2495c; --error-bg: rgba(242,73,92,.08); --error-border: rgba(242,73,92,.2); --none: #2d3340; --none-bg: rgba(45,51,64,.3); /* Accent — Grafana blue */ --accent: #5794f2; --accent-hover: #7aabf7; --accent-bg: rgba(87,148,242,.1); --accent-border: rgba(87,148,242,.25); /* Layout */ --header-h: 48px; --radius: 4px; --radius-sm: 3px; --radius-lg: 6px; --max-w: 1200px; /* Shadow */ --shadow: 0 1px 2px rgba(0,0,0,.6), 0 4px 16px rgba(0,0,0,.4); --shadow-card: 0 0 0 1px var(--border); --shadow-float: 0 4px 24px rgba(0,0,0,.7); } body.light { --bg: #f0f2f5; --bg-card: #ffffff; --bg-card-hover: #f8fafc; --bg-elevated: #eaecef; --bg-tooltip: #1c1f26; --border: rgba(0,0,0,.1); --border-hover: rgba(0,0,0,.18); --border-focus: rgba(0,0,0,.28); --text-primary: #1a1d23; --text-secondary:#52596a; --text-muted: #9ca3af; --shadow: 0 1px 2px rgba(0,0,0,.08), 0 4px 16px rgba(0,0,0,.05); --shadow-card: 0 0 0 1px var(--border); --none: #d1d5db; --none-bg: rgba(209,213,219,.3); } /* ── Reset ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: 'Geist Variable', 'Geist', system-ui, -apple-system, sans-serif; font-size: 13px; font-weight: 400; line-height: 1.5; color: var(--text-primary); background: var(--bg); min-height: 100vh; transition: background .2s, color .2s; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } /* ── Monospace ── */ .mono, code, .stat-value, .header-time, .meta-tag, .service-badge, .stat-card__value, .network-card__value, .uptime-footer, .incident-meta, .summary-item__value, .footer-update { font-family: 'Geist Mono', monospace; font-weight: 400; } /* ── Layout ── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; } /* ══════════════════════════════════════════ HEADER — Grafana top nav style ══════════════════════════════════════════ */ .site-header { position: sticky; top: 0; z-index: 100; height: var(--header-h); background: rgba(17,18,23,.92); backdrop-filter: blur(12px) saturate(1.2); border-bottom: 1px solid var(--border); } body.light .site-header { background: rgba(240,242,245,.92); } .header-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 20px; height: 100%; display: flex; align-items: center; gap: 20px; } .logo { display: flex; align-items: center; gap: 8px; flex-shrink: 0; user-select: none; } .logo-icon { color: var(--accent); display: flex; } .logo-text { font-weight: 400; font-size: 15px; color: var(--text-primary); letter-spacing: -.01em; } .logo-sub { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); background: var(--bg-elevated); border: 1px solid var(--border); padding: 1px 6px; border-radius: var(--radius-sm); font-family: 'Geist Mono', monospace; } .header-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; } .header-time { font-size: 11px; color: var(--text-muted); padding: 0 12px; letter-spacing: .03em; } .nav-link { font-size: 13px; font-weight: 400; color: var(--text-secondary); padding: 5px 10px; border-radius: var(--radius-sm); transition: color .12s, background .12s; } .nav-link:hover { color: var(--text-primary); background: var(--bg-elevated); } .theme-toggle { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; color: var(--text-secondary); transition: all .12s; margin-left: 4px; } .theme-toggle:hover { color: var(--text-primary); border-color: var(--border-hover); background: var(--bg-elevated); } body:not(.light) .icon-sun { display: none; } body.light .icon-moon { display: none; } /* ══════════════════════════════════════════ MAIN ══════════════════════════════════════════ */ .main-content { padding: 28px 0 72px; } /* ── Status Banner ── */ .section-banner { margin-bottom: 28px; } .status-banner { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: var(--radius); border-left: 3px solid; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; animation: bannerIn .3s ease; } @keyframes bannerIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:none; } } .status-banner--ok { background: var(--ok-bg); border-color: var(--ok-border); border-left-color: var(--ok); } .status-banner--warn { background: var(--warn-bg); border-color: var(--warn-border); border-left-color: var(--warn); } .status-banner--error { background: var(--error-bg); border-color: var(--error-border); border-left-color: var(--error); } .banner-icon { display: flex; align-items: center; flex-shrink: 0; } .status-banner--ok .banner-icon { color: var(--ok); } .status-banner--warn .banner-icon { color: var(--warn); } .status-banner--error .banner-icon { color: var(--error); } .banner-text { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .banner-text strong { font-size: 13px; font-weight: 400; color: var(--text-primary); } .banner-text span { font-size: 12px; color: var(--text-secondary); } /* ── Section header ── */ .section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .section-title { font-size: 13px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; } .section-subtitle { font-size: 11px; font-weight: 400; color: var(--text-muted); margin-bottom: 10px; letter-spacing: .06em; text-transform: uppercase; } .legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .legend-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--text-muted); } .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; } .dot--ok { background: var(--ok); } .dot--warn { background: var(--warn); } .dot--error { background: var(--error); } .dot--none { background: var(--none); } /* ── Category ── */ .category-group { margin-bottom: 28px; } .category-label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; } .category-label::after { content: ''; flex: 1; height: 1px; background: var(--border); } /* ── Services Grid ── */ .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; } /* ── Service Card — panel style ── */ .service-card { display: flex; flex-direction: column; gap: 10px; padding: 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: background .15s, border-color .15s; cursor: pointer; position: relative; } .service-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); } /* left accent bar */ .service-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; opacity: 0; transition: opacity .15s; } .service-card.status--online::before { background: var(--ok); opacity: 1; } .service-card.status--degraded::before{ background: var(--warn); opacity: 1; } .service-card.status--offline::before, .service-card.status--unreachable::before { background: var(--error); opacity: 1; } .service-card__header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .service-name { font-weight: 400; font-size: 13px; color: var(--text-primary); } /* ── Badge ── */ .service-badge { font-size: 10px; font-weight: 400; padding: 2px 7px; border-radius: 2px; flex-shrink: 0; letter-spacing: .04em; font-family: 'Geist Mono', monospace; } .service-badge--online { background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); } .service-badge--degraded { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn-border); } .service-badge--offline, .service-badge--unreachable { background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); } .service-badge--unknown { background: var(--none-bg); color: var(--text-muted); border: 1px solid var(--border); } .service-badge--lg { font-size: 11px; padding: 3px 10px; } /* ── Meta tags ── */ .service-card__meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; } .meta-tag { font-size: 10px; padding: 1px 6px; border-radius: var(--radius-sm); background: var(--bg-elevated); border: 1px solid var(--border); color: var(--text-muted); font-family: 'Geist Mono', monospace; } .meta-tag--level { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); } /* ── Stats ── */ .service-card__stats { display: flex; gap: 16px; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; gap: 2px; } .stat-label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-family: 'Geist Mono', monospace; } .stat-value { font-size: 13px; color: var(--text-primary); } /* ── Uptime Bars — Grafana sparkline style ── */ .uptime-bars { display: flex; align-items: flex-end; gap: 1.5px; height: 24px; } .uptime-bar { flex: 1; height: 100%; border-radius: 1px; transition: opacity .1s, filter .1s; cursor: default; position: relative; } .uptime-bar:hover { opacity: .75; } .bar--ok { background: var(--ok); opacity: .7; } .bar--ok:hover { opacity: 1; } .bar--warn { background: var(--warn); opacity: .8; } .bar--error { background: var(--error); } .bar--none { background: var(--none); opacity: .3; } .uptime-footer { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-muted); margin-top: 3px; font-family: 'Geist Mono', monospace; } /* ── Empty ── */ .empty-state { text-align: center; padding: 60px 24px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-state p { font-size: 13px; line-height: 1.8; } /* ══════════════════════════════════════════ SERVICE DETAIL ══════════════════════════════════════════ */ .breadcrumb { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); margin-bottom: 20px; font-family: 'Geist Mono', monospace; } .breadcrumb a:hover { color: var(--text-primary); } .detail-header { margin-bottom: 20px; } .detail-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .detail-title { font-size: 22px; font-weight: 400; letter-spacing: -.02em; } .detail-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .detail-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--radius); border-left: 3px solid; border-top: 1px solid; border-right: 1px solid; border-bottom: 1px solid; margin-bottom: 20px; } .detail-banner--online { background: var(--ok-bg); border-color: var(--ok-border); border-left-color: var(--ok); } .detail-banner--degraded { background: var(--warn-bg); border-color: var(--warn-border); border-left-color: var(--warn); } .detail-banner--offline, .detail-banner--unreachable { background: var(--error-bg); border-color: var(--error-border); border-left-color: var(--error); } .detail-banner--unknown { background: var(--none-bg); border-color: var(--border); } .detail-banner--online .banner-icon { color: var(--ok); } .detail-banner--degraded .banner-icon { color: var(--warn); } .detail-banner--offline .banner-icon, .detail-banner--unreachable .banner-icon { color: var(--error); } /* ── Stats Row — Grafana stat panel ── */ .stats-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 10px; margin-bottom: 20px; } .stat-card { padding: 14px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); transition: background .15s, border-color .15s; } .stat-card:hover { background: var(--bg-card-hover); } .stat-card__value { font-size: 24px; font-weight: 400; margin-bottom: 4px; letter-spacing: -.03em; color: var(--text-primary); line-height: 1; } .stat-card__label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-family: 'Geist Mono', monospace; } /* ── Network Row ── */ .network-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .network-card { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); flex: 1; min-width: 140px; transition: background .15s, border-color .15s; } .network-card:hover { background: var(--bg-card-hover); } .network-card__icon { font-size: 16px; color: var(--text-muted); } .network-card__value { font-size: 14px; color: var(--text-primary); } .network-card__label { font-size: 10px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-family: 'Geist Mono', monospace; } /* ── Detail sections ── */ .detail-section { margin-bottom: 24px; } .uptime-bars--lg { height: 32px; gap: 2px; } .uptime-footer--lg { margin-top: 6px; font-size: 10px; color: var(--text-muted); font-family: 'Geist Mono', monospace; display: flex; justify-content: space-between; } /* ── Grafana-style chart panel ── */ .chart-panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .chart-panel__header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 0; border-bottom: 1px solid var(--border); margin-bottom: 0; } .chart-panel__title { font-size: 11px; font-weight: 400; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .06em; padding-bottom: 10px; font-family: 'Geist Mono', monospace; } .chart-panel__body { padding: 12px 4px 8px; } /* ── Text colors ── */ .text--ok { color: var(--ok); } .text--warn { color: var(--warn); } .text--error { color: var(--error); } /* ══════════════════════════════════════════ FOOTER ══════════════════════════════════════════ */ .site-footer { border-top: 1px solid var(--border); padding: 14px 0; background: var(--bg); } .footer-inner { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .footer-brand { font-size: 12px; font-weight: 400; color: var(--text-muted); letter-spacing: .02em; } .footer-meta { font-size: 11px; color: var(--text-muted); } .footer-update{ font-size: 11px; color: var(--text-muted); margin-left: auto; font-family: 'Geist Mono', monospace; } /* ══════════════════════════════════════════ INCIDENT HISTORY (history.php inline styles replaced) ══════════════════════════════════════════ */ .incident-timeline { display: flex; flex-direction: column; } .incident-day { margin-bottom: 28px; } .incident-day-label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; font-family: 'Geist Mono', monospace; } .incident-card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--bg-card); border: 1px solid var(--border); margin-bottom: 1px; transition: border-color .12s, background .12s; } .incident-card:last-child { margin-bottom: 0; } .incident-card:hover { background: var(--bg-card-hover); border-color: var(--border-hover); } .incident-indicator { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 3px; } .incident-indicator--degraded { background: var(--warn); } .incident-indicator--offline, .incident-indicator--unreachable { background: var(--error); } .incident-body { flex: 1; } .incident-title { font-weight: 400; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--text-primary); } .incident-service { color: var(--text-secondary); font-size: 12px; } .incident-meta { margin-top: 4px; font-size: 11px; color: var(--text-muted); font-family: 'Geist Mono', monospace; display: flex; gap: 12px; flex-wrap: wrap; } .incident-status-pill { font-size: 10px; padding: 1px 7px; border-radius: 2px; font-family: 'Geist Mono', monospace; border: 1px solid; } .incident-status-pill--degraded { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-border); } .incident-status-pill--offline, .incident-status-pill--unreachable { color: var(--error); background: var(--error-bg); border-color: var(--error-border); } .badge-resolved { font-size: 10px; padding: 1px 7px; border-radius: 2px; background: var(--ok-bg); color: var(--ok); border: 1px solid var(--ok-border); font-family: 'Geist Mono', monospace; } .badge-ongoing { font-size: 10px; padding: 1px 7px; border-radius: 2px; background: var(--error-bg); color: var(--error); border: 1px solid var(--error-border); font-family: 'Geist Mono', monospace; animation: pulse 2s infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.55} } .empty-history { text-align: center; padding: 60px 24px; color: var(--text-muted); display: flex; flex-direction: column; align-items: center; gap: 12px; } .empty-history svg { opacity: .3; } .summary-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; } .summary-item { display: flex; flex-direction: column; gap: 4px; padding: 14px 20px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); flex: 1; min-width: 100px; transition: background .15s, border-color .15s; } .summary-item:hover { background: var(--bg-card-hover); } .summary-item__value { font-size: 22px; font-weight: 400; color: var(--text-primary); letter-spacing: -.03em; line-height: 1; } .summary-item__label { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); font-family: 'Geist Mono', monospace; } /* ══════════════════════════════════════════ ADMIN ══════════════════════════════════════════ */ .admin-layout { display: grid; grid-template-columns: 200px 1fr; min-height: calc(100vh - var(--header-h)); } .admin-sidebar { background: var(--bg-card); border-right: 1px solid var(--border); padding: 20px 0; position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; } .admin-sidebar__section { margin-bottom: 20px; } .admin-sidebar__label { font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .1em; color: var(--text-muted); padding: 0 16px 8px; font-family: 'Geist Mono', monospace; } .admin-sidebar__link { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 13px; color: var(--text-secondary); transition: color .12s, background .12s; cursor: pointer; } .admin-sidebar__link:hover, .admin-sidebar__link.active { color: var(--text-primary); background: var(--bg-elevated); } .admin-sidebar__link.active { border-left: 2px solid var(--accent); } .admin-main { padding: 24px; overflow-y: auto; } .admin-section { display: none; } .admin-section.active { display: block; } /* forms */ .form-group { margin-bottom: 14px; } .form-label { display: block; font-size: 11px; color: var(--text-muted); margin-bottom: 4px; font-family: 'Geist Mono', monospace; text-transform: uppercase; letter-spacing: .06em; } .form-input, .form-select { width: 100%; padding: 7px 10px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-primary); font-size: 13px; font-family: 'Geist Variable', 'Geist', sans-serif; transition: border-color .12s; outline: none; } .form-input:focus, .form-select:focus { border-color: var(--accent); } .form-select option { background: var(--bg-elevated); } .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-sm); font-size: 12px; font-weight: 400; cursor: pointer; border: 1px solid transparent; transition: all .12s; font-family: 'Geist Variable', 'Geist', sans-serif; } .btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: var(--border); } .btn-ghost:hover { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border-hover); } .btn-danger { background: var(--error-bg); color: var(--error); border-color: var(--error-border); } .btn-danger:hover { background: var(--error); color: #fff; } .btn-sm { padding: 4px 10px; font-size: 11px; } /* tables */ .data-table { width: 100%; border-collapse: collapse; } .data-table th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); padding: 8px 12px; border-bottom: 1px solid var(--border); font-weight: 400; font-family: 'Geist Mono', monospace; } .data-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); font-size: 12px; color: var(--text-secondary); vertical-align: middle; } .data-table tr:last-child td { border-bottom: none; } .data-table tr:hover td { background: var(--bg-elevated); } .data-table .td-primary { color: var(--text-primary); } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .card-header { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .card-title { font-size: 13px; color: var(--text-primary); } .card-body { padding: 0; } .flash-msg { padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 12px; border-left: 3px solid; } .flash-msg--ok { background: var(--ok-bg); color: var(--ok); border-color: var(--ok); } .flash-msg--error { background: var(--error-bg); color: var(--error); border-color: var(--error); } /* login page */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); } .login-card { width: 100%; max-width: 360px; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; } .login-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 24px; } .login-title { font-size: 16px; font-weight: 400; margin-bottom: 4px; } .login-sub { font-size: 12px; color: var(--text-muted); margin-bottom: 24px; } .login-err { font-size: 12px; color: var(--error); margin-bottom: 12px; } /* ══════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════ */ @media (max-width: 768px) { .container { padding: 0 12px; } .services-grid { grid-template-columns: 1fr; } .stats-row { grid-template-columns: repeat(2, 1fr); } .detail-title { font-size: 18px; } .header-time { display: none; } .logo-sub { display: none; } .network-row { flex-direction: column; } .admin-layout { grid-template-columns: 1fr; } .admin-sidebar { position: static; height: auto; } .summary-bar { flex-direction: column; } } @media (max-width: 480px) { .main-content { padding: 16px 0 48px; } .section-banner { margin-bottom: 20px; } .stats-row { grid-template-columns: 1fr 1fr; } .stat-card__value { font-size: 20px; } .services-grid { gap: 8px; } } /* ── Scrollbar ── */ ::-webkit-scrollbar { width: 5px; height: 5px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--border-hover); } /* ── Animations ── */ @keyframes fadeUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } } .service-card { animation: fadeUp .25s ease both; } .service-card:nth-child(1) { animation-delay: .02s; } .service-card:nth-child(2) { animation-delay: .04s; } .service-card:nth-child(3) { animation-delay: .06s; } .service-card:nth-child(4) { animation-delay: .08s; } .service-card:nth-child(5) { animation-delay: .10s; } .service-card:nth-child(6) { animation-delay: .12s; } .stat-card { animation: fadeUp .2s ease both; }