/* ════════════════════════════════════════════════════════════ SIGNAL.DAT — DESIGN SYSTEM · v1.1 A portable, framework-agnostic brand + UI kit. Visual language: Nothing OS · dot-matrix · technical minimal. Usage: (or "dark") Everything is driven by CSS custom properties (the "tokens" block below). Override tokens to re-skin per product while keeping component behavior identical. ════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Doto:wght@400;500;700;900&family=JetBrains+Mono:ital,wght@0,400;0,500;0,700;1,400&family=Space+Grotesk:wght@300;400;500;600;700&display=swap'); /* ════════════════════════════════════════════════════════════ 1. TOKENS — LIGHT (default) ════════════════════════════════════════════════════════════ */ :root { color-scheme: light; /* ── Brand ───────────────────────────────────────── */ --sd-accent: #D71921; /* Nothing red — primary brand */ --sd-accent-hi: #E63B42; /* hover / pressed */ --sd-accent-dim: rgba(215,25,33,0.10); --sd-on-accent: #FFFFFF; /* ── Surfaces ────────────────────────────────────── */ --sd-bg: #E9E9E7; /* app canvas */ --sd-bg-panel: #FFFFFF; /* cards / panels */ --sd-bg-alt: #F3F3F1; /* subtle fills, hovers */ --sd-bg-input: #FFFFFF; /* inputs */ --sd-bg-sunken: #EDEDEB; /* inset / track backgrounds */ /* ── Lines ───────────────────────────────────────── */ --sd-border: #E2E2DF; --sd-border-hi: #CFCFCB; /* ── Text ────────────────────────────────────────── */ --sd-txt: #1A1A18; --sd-txt-muted: #8A8A86; --sd-txt-dim: #B6B6B1; /* ── Signals ─────────────────────────────────────── */ --sd-success: #1F9D55; --sd-warning: #C77A12; --sd-danger: #D71921; --sd-info: #2563B0; /* ── Typography ──────────────────────────────────── */ --sd-font-sans: 'Space Grotesk', system-ui, sans-serif; --sd-font-mono: 'JetBrains Mono', ui-monospace, monospace; --sd-font-dot: 'Doto', 'JetBrains Mono', monospace; /* Proportional display face for large numeric readouts (money, totals) where dot-matrix would hurt legibility. */ --sd-font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Space Grotesk', system-ui, sans-serif; /* type scale */ --sd-text-xs: 10px; --sd-text-sm: 12px; --sd-text-base: 14px; --sd-text-md: 18px; --sd-text-lg: 24px; --sd-text-xl: 36px; --sd-text-display: 64px; /* tracking (the technical, spaced-out caps look) */ --sd-track-tight: 0.02em; --sd-track: 0.08em; --sd-track-wide: 0.16em; /* ── Spacing scale (4px base) ────────────────────── */ --sd-space-1: 4px; --sd-space-2: 8px; --sd-space-3: 12px; --sd-space-4: 16px; --sd-space-5: 20px; --sd-space-6: 24px; --sd-space-8: 32px; --sd-space-10: 40px; /* ── Radii ───────────────────────────────────────── */ --sd-r: 16px; /* cards */ --sd-r-md: 12px; /* inner blocks */ --sd-r-sm: 10px; /* inputs */ --sd-r-pill: 100px; /* buttons / pills */ /* ── Elevation ───────────────────────────────────── */ --sd-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.04); --sd-shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --sd-shadow-lg: 0 24px 64px rgba(0,0,0,0.25); /* ── Motion ──────────────────────────────────────── */ --sd-ease: cubic-bezier(0.16, 1, 0.3, 1); --sd-dur-fast: 0.14s; --sd-dur: 0.25s; --sd-dur-slow: 0.4s; } /* ════════════════════════════════════════════════════════════ 2. TOKENS — DARK ════════════════════════════════════════════════════════════ */ html[data-theme="dark"] { color-scheme: dark; --sd-accent: #FF3B33; --sd-accent-hi: #FF5A52; --sd-accent-dim: rgba(255,59,51,0.14); --sd-on-accent: #FFFFFF; --sd-bg: #0A0A0A; --sd-bg-panel: #161615; --sd-bg-alt: #1F1F1D; --sd-bg-input: #121211; --sd-bg-sunken: #0E0E0D; --sd-border: #2A2A28; --sd-border-hi: #3C3C39; --sd-txt: #F1F1EE; --sd-txt-muted: #7A7A75; --sd-txt-dim: #4A4A46; --sd-success: #34D17A; --sd-warning: #E0A53A; --sd-danger: #FF453A; --sd-info: #5AA2FF; --sd-shadow: none; --sd-shadow-sm: none; --sd-shadow-lg: 0 24px 64px rgba(0,0,0,0.6); } /* ════════════════════════════════════════════════════════════ 3. RESET + BASE ════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: var(--sd-bg); color: var(--sd-txt); font-family: var(--sd-font-sans); font-size: var(--sd-text-base); font-weight: 400; line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; transition: background-color var(--sd-dur) ease, color var(--sd-dur) ease; } a { color: var(--sd-accent); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--sd-accent); outline-offset: 2px; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--sd-border-hi); border-radius: var(--sd-r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--sd-txt-dim); } /* ════════════════════════════════════════════════════════════ 4. TYPOGRAPHY HELPERS ════════════════════════════════════════════════════════════ */ /* Brand wordmark — dot-matrix display */ .sd-wordmark { font-family: var(--sd-font-dot); font-weight: 700; font-size: var(--sd-text-lg); letter-spacing: var(--sd-track-wide); color: var(--sd-txt); line-height: 1; } /* Big numeric / metric readout — dot-matrix */ .sd-readout { font-family: var(--sd-font-dot); font-weight: 700; font-size: var(--sd-text-lg); letter-spacing: var(--sd-track-tight); color: var(--sd-txt); line-height: 1; } /* Section / field label — the spaced uppercase mono signature */ .sd-label, .sd-eyebrow { font-family: var(--sd-font-mono); font-size: var(--sd-text-xs); font-weight: 700; letter-spacing: var(--sd-track-wide); text-transform: uppercase; color: var(--sd-txt-muted); } .sd-mono { font-family: var(--sd-font-mono); } .sd-dot { font-family: var(--sd-font-dot); } .sd-text-muted { color: var(--sd-txt-muted); } .sd-text-dim { color: var(--sd-txt-dim); } .sd-text-accent{ color: var(--sd-accent); } /* ════════════════════════════════════════════════════════════ 5. BUTTONS ════════════════════════════════════════════════════════════ */ .sd-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sd-space-2); padding: 11px 20px; border-radius: var(--sd-r-pill); font-family: var(--sd-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; transition: all var(--sd-dur-fast); white-space: nowrap; border: 1px solid transparent; background: transparent; color: var(--sd-txt); } .sd-btn svg, .sd-btn i { width: 14px; height: 14px; } .sd-btn--primary { background: var(--sd-accent); color: var(--sd-on-accent); border-color: var(--sd-accent); } .sd-btn--primary:hover { background: var(--sd-accent-hi); border-color: var(--sd-accent-hi); } .sd-btn--secondary { background: transparent; color: var(--sd-txt); border-color: var(--sd-border-hi); } .sd-btn--secondary:hover { border-color: var(--sd-txt); } .sd-btn--ghost { background: var(--sd-bg-panel); color: var(--sd-txt-muted); border-color: var(--sd-border-hi); } .sd-btn--ghost:hover { border-color: var(--sd-accent); color: var(--sd-txt); } .sd-btn--lg { padding: 15px 24px; letter-spacing: var(--sd-track-wide); } .sd-btn--block { width: 100%; } .sd-icon-btn { width: 40px; height: 40px; border-radius: var(--sd-r-pill); border: 1px solid var(--sd-border-hi); background: var(--sd-bg-panel); color: var(--sd-txt-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color var(--sd-dur-fast), color var(--sd-dur-fast), transform 0.15s; flex-shrink: 0; } .sd-icon-btn:hover { border-color: var(--sd-accent); color: var(--sd-txt); transform: scale(1.06); } .sd-icon-btn svg, .sd-icon-btn i { width: 16px; height: 16px; } /* ════════════════════════════════════════════════════════════ 6. FORMS ════════════════════════════════════════════════════════════ */ .sd-field { display: flex; flex-direction: column; gap: var(--sd-space-2); } .sd-field > label { font-family: var(--sd-font-mono); font-size: var(--sd-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sd-txt-muted); } .sd-input, .sd-select, .sd-textarea { background: var(--sd-bg-input); border: 1px solid var(--sd-border); border-radius: var(--sd-r-sm); color: var(--sd-txt); font-family: var(--sd-font-sans); font-size: var(--sd-text-base); font-weight: 400; padding: 12px 14px; width: 100%; transition: border-color 0.15s, box-shadow 0.15s; appearance: none; -webkit-appearance: none; } .sd-input::placeholder, .sd-textarea::placeholder { color: var(--sd-txt-dim); } .sd-input:focus, .sd-select:focus, .sd-textarea:focus { outline: none; border-color: var(--sd-accent); box-shadow: 0 0 0 3px var(--sd-accent-dim); } .sd-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238A8A86' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 34px; cursor: pointer; } .sd-textarea { resize: vertical; min-height: 80px; line-height: 1.65; } .sd-hint { font-family: var(--sd-font-mono); font-size: var(--sd-text-xs); color: var(--sd-txt-muted); line-height: 1.5; } /* ════════════════════════════════════════════════════════════ 7. CARDS / PANELS ════════════════════════════════════════════════════════════ */ .sd-card { background: var(--sd-bg-panel); border: 1px solid var(--sd-border); border-radius: var(--sd-r); box-shadow: var(--sd-shadow); overflow: hidden; } .sd-card__header { padding: 20px 24px 16px; border-bottom: 1px solid var(--sd-border); } .sd-card__title { font-family: var(--sd-font-mono); font-size: var(--sd-text-xs); font-weight: 700; letter-spacing: var(--sd-track-wide); text-transform: uppercase; color: var(--sd-txt-muted); display: flex; align-items: center; gap: 9px; } .sd-card__title svg, .sd-card__title i { width: 14px; height: 14px; color: var(--sd-accent); } .sd-card__body { padding: 24px; display: flex; flex-direction: column; gap: var(--sd-space-5); } /* ════════════════════════════════════════════════════════════ 8. PILLS / BADGES ════════════════════════════════════════════════════════════ */ .sd-pill { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--sd-border-hi); border-radius: var(--sd-r-pill); padding: 7px 12px; font-family: var(--sd-font-mono); font-size: var(--sd-text-xs); font-weight: 700; letter-spacing: var(--sd-track); text-transform: uppercase; color: var(--sd-txt-muted); } .sd-pill svg, .sd-pill i { width: 12px; height: 12px; } .sd-pill--accent { color: var(--sd-accent); border-color: var(--sd-accent); background: var(--sd-accent-dim); } .sd-pill--success { color: var(--sd-success); border-color: currentColor; } .sd-pill--warning { color: var(--sd-warning); border-color: currentColor; } .sd-pill--danger { color: var(--sd-danger); border-color: currentColor; } .sd-badge { background: var(--sd-accent-dim); color: var(--sd-accent); padding: 5px 10px; border-radius: var(--sd-r-pill); font-family: var(--sd-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.05em; } /* ════════════════════════════════════════════════════════════ 9. SEGMENTED CONTROL / TABS ════════════════════════════════════════════════════════════ */ .sd-segment { display: flex; background: var(--sd-bg-sunken); border: 1px solid var(--sd-border); border-radius: var(--sd-r-pill); padding: 4px; gap: 4px; } .sd-segment__btn { flex: 1; background: transparent; border: none; border-radius: var(--sd-r-pill); color: var(--sd-txt-muted); padding: 9px 12px; font-family: var(--sd-font-mono); font-size: var(--sd-text-xs); font-weight: 700; letter-spacing: var(--sd-track); text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: all 0.15s; } .sd-segment__btn svg, .sd-segment__btn i { width: 13px; height: 13px; } .sd-segment__btn.is-active { background: var(--sd-bg-panel); color: var(--sd-txt); box-shadow: var(--sd-shadow-sm); } .sd-segment__btn:not(.is-active):hover { color: var(--sd-txt); } /* ════════════════════════════════════════════════════════════ 10. METRIC READOUT (dashboard stat) ════════════════════════════════════════════════════════════ */ .sd-metric { display: flex; flex-direction: column; gap: 3px; } .sd-metric__label { font-family: var(--sd-font-mono); font-size: 9px; font-weight: 700; letter-spacing: var(--sd-track-wide); text-transform: uppercase; color: var(--sd-txt-muted); } .sd-metric__value { font-family: var(--sd-font-dot); font-size: var(--sd-text-lg); font-weight: 700; color: var(--sd-txt); letter-spacing: var(--sd-track-tight); line-height: 1; } .sd-metric__source { font-family: var(--sd-font-mono); font-size: 9px; color: var(--sd-txt-dim); letter-spacing: 0.04em; } /* ════════════════════════════════════════════════════════════ 11. DROP ZONE ════════════════════════════════════════════════════════════ */ .sd-dropzone { border: 1.5px dashed var(--sd-border-hi); border-radius: var(--sd-r-md); padding: 34px 24px; text-align: center; cursor: pointer; background: var(--sd-bg-alt); transition: all 0.15s; } .sd-dropzone:hover, .sd-dropzone.is-dragover { border-color: var(--sd-accent); background: var(--sd-accent-dim); } /* ════════════════════════════════════════════════════════════ 12. SPINNER + PROGRESS ════════════════════════════════════════════════════════════ */ .sd-spinner { width: 36px; height: 36px; border: 2px solid var(--sd-border); border-top-color: var(--sd-accent); border-radius: 50%; animation: sd-spin 1s linear infinite; } @keyframes sd-spin { to { transform: rotate(360deg); } } .sd-progress { width: 100%; height: 3px; background: var(--sd-bg-sunken); border-radius: var(--sd-r-pill); overflow: hidden; } .sd-progress__fill { width: 30%; height: 100%; background: var(--sd-accent); border-radius: var(--sd-r-pill); animation: sd-indeterminate 1.4s ease-in-out infinite; } @keyframes sd-indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(400%); } } /* ════════════════════════════════════════════════════════════ 13. UTILITIES ════════════════════════════════════════════════════════════ */ .sd-hidden { display: none !important; } .sd-w-full { width: 100%; } .sd-stack { display: flex; flex-direction: column; gap: var(--sd-space-4); } .sd-row { display: flex; align-items: center; gap: var(--sd-space-3); } @keyframes sd-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .sd-fade-in { animation: sd-fade-in var(--sd-dur) ease; } /* ════════════════════════════════════════════════════════════ 14. DISPLAY READOUT (large proportional numbers) For money / hero totals. Uses --sd-font-display + tabular nums so columns of figures stay aligned. Pair with .sd-display__cur (currency mark) and .sd-display__cents (decimals). ════════════════════════════════════════════════════════════ */ .sd-display { font-family: var(--sd-font-display); font-weight: 800; font-size: clamp(52px, 8vw, 92px); line-height: 0.92; letter-spacing: -0.04em; color: var(--sd-txt); font-variant-numeric: tabular-nums; text-shadow: 0 0 42px var(--sd-accent-dim); } .sd-display--md { font-size: 30px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; text-shadow: none; } .sd-display--sm { font-size: 20px; font-weight: 800; line-height: 1; letter-spacing: -0.01em; text-shadow: none; } .sd-display__cur { color: var(--sd-accent); font-size: .58em; vertical-align: top; margin-right: 4px; } .sd-display__cents { color: var(--sd-txt-muted); font-size: .5em; vertical-align: top; } /* ════════════════════════════════════════════════════════════ 15. METER (determinate progress bar, gradient) Thicker companion to .sd-progress for "x of y" goals. Set width on the inner fill:
════════════════════════════════════════════════════════════ */ .sd-meter { width: 100%; height: 12px; background: var(--sd-bg-sunken); border-radius: var(--sd-r-pill); overflow: hidden; } .sd-meter > span { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--sd-accent), var(--sd-accent-hi)); border-radius: var(--sd-r-pill); transition: width var(--sd-dur-slow) var(--sd-ease); } .sd-meter--thin { height: 6px; } /* ════════════════════════════════════════════════════════════ 16. STAT ROW (label / value list) ════════════════════════════════════════════════════════════ */ .sd-stat-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sd-space-3); padding: 12px 0; border-bottom: 1px solid var(--sd-border); } .sd-stat-row:last-child { border-bottom: none; } .sd-stat-row__label { font-family: var(--sd-font-mono); font-size: var(--sd-text-sm); color: var(--sd-txt-muted); letter-spacing: 0.04em; } .sd-stat-row__value { font-family: var(--sd-font-display); font-weight: 800; font-size: 20px; color: var(--sd-txt); font-variant-numeric: tabular-nums; } /* ════════════════════════════════════════════════════════════ 17. BAR CHART (vertical, lightweight)
M
...
════════════════════════════════════════════════════════════ */ .sd-barchart { display: flex; align-items: flex-end; gap: 5px; height: 110px; padding-top: 6px; } .sd-barchart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; min-width: 0; } .sd-barchart__bar { width: 100%; max-width: 28px; min-height: 3px; border-radius: 6px 6px 3px 3px; background: var(--sd-border-hi); transition: height var(--sd-dur-slow) var(--sd-ease), background var(--sd-dur-fast); } .sd-barchart__col.is-on .sd-barchart__bar { background: linear-gradient(180deg, var(--sd-accent-hi), var(--sd-accent)); } .sd-barchart__col:hover .sd-barchart__bar { background: var(--sd-accent); } .sd-barchart__cap { font-family: var(--sd-font-mono); font-size: 8px; color: var(--sd-txt-dim); letter-spacing: 0.02em; white-space: nowrap; } /* ════════════════════════════════════════════════════════════ 18. LIVE INDICATOR (status dot) Synced ════════════════════════════════════════════════════════════ */ .sd-live { display: inline-flex; align-items: center; gap: 6px; } .sd-live__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--sd-success); box-shadow: 0 0 0 0 var(--sd-success); animation: sd-pulse 2.4s var(--sd-ease) infinite; } .sd-live--accent .sd-live__dot { background: var(--sd-accent); } @keyframes sd-pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(.82); } } /* ════════════════════════════════════════════════════════════ 19. APP SHELL (sidebar + main layout)
…
…
Collapses to a sticky top bar with horizontally scrolling nav on narrow viewports. ════════════════════════════════════════════════════════════ */ .sd-app { display: flex; height: 100vh; } .sd-sidebar { width: 252px; flex-shrink: 0; background: var(--sd-bg-panel); border-right: 1px solid var(--sd-border); display: flex; flex-direction: column; padding: var(--sd-space-4); gap: var(--sd-space-2); } .sd-sidebar__brand { display: flex; align-items: center; gap: 10px; padding: 8px 10px 16px; border-bottom: 1px solid var(--sd-border); margin-bottom: 8px; } .sd-sidebar__brand .sd-live__dot { box-shadow: 0 0 0 4px var(--sd-accent-dim); background: var(--sd-accent); } .sd-sidebar__wordmark { font-family: var(--sd-font-dot); font-weight: 700; font-size: 16px; letter-spacing: 0.14em; } .sd-sidebar__nav { display: flex; flex-direction: column; gap: 2px; } .sd-sidebar__foot { margin-top: auto; } .sd-nav { display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: var(--sd-r-sm); background: transparent; border: none; cursor: pointer; color: var(--sd-txt-muted); font-family: var(--sd-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; text-align: left; transition: background var(--sd-dur-fast), color var(--sd-dur-fast); } .sd-nav svg, .sd-nav i { width: 17px; height: 17px; flex-shrink: 0; } .sd-nav:hover { background: var(--sd-bg-alt); color: var(--sd-txt); } .sd-nav.is-active { background: var(--sd-accent-dim); color: var(--sd-accent); } .sd-nav.is-active svg { color: var(--sd-accent); } .sd-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .sd-topbar { display: flex; align-items: center; justify-content: space-between; padding: 16px 28px; border-bottom: 1px solid var(--sd-border); background: var(--sd-bg-panel); } .sd-topbar h1 { font-family: var(--sd-font-sans); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; } .sd-content { flex: 1; overflow-y: auto; padding: 28px; } .sd-content__inner { max-width: 980px; margin: 0 auto; } /* Hero band inside a card (radial accent wash) */ .sd-hero { position: relative; overflow: hidden; } .sd-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, var(--sd-accent-dim), transparent 48%); } .sd-hero__pad { position: relative; z-index: 1; padding: var(--sd-space-8) var(--sd-space-6); display: flex; flex-direction: column; gap: var(--sd-space-3); } /* View switching */ .sd-view { display: none; } .sd-view.is-active { display: block; animation: sd-fade-in var(--sd-dur) ease; } @media (max-width: 720px) { .sd-app { flex-direction: column; height: auto; } .sd-sidebar { width: 100%; flex-direction: column; gap: 6px; padding: 12px 16px 10px; position: sticky; top: 0; z-index: 100; } .sd-sidebar__brand { border: none; margin: 0; padding: 0 0 8px; width: 100%; } .sd-sidebar__nav { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 4px; padding-bottom: 2px; } .sd-sidebar__nav::-webkit-scrollbar { display: none; } .sd-nav { flex-shrink: 0; padding: 8px 12px; font-size: 10px; gap: 6px; white-space: nowrap; } .sd-nav svg, .sd-nav i { width: 14px; height: 14px; } .sd-sidebar__foot { display: none; } .sd-topbar { padding: 10px 16px; } .sd-topbar h1 { font-size: 16px; } .sd-content { overflow: visible; padding: 16px; } .sd-content__inner { max-width: 100%; } .sd-display { font-size: clamp(44px, 15vw, 72px); } .sd-hero__pad { padding: 20px 18px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } }