/* ================================================================ Entangle Design System — Foundations ───────────────────────────────────── Brand: Entangle™ (entangle.com.au) System: "Weave" (design-system.entangle.com.au) Source: github.com/Entangle-HQ/entangle — packages/tokens + packages/ui/theme.css Typography: Suisse Intl (display + sans) / Suisse Intl Mono. Default theme is DARK. Add class `light` to to flip. ================================================================ */ /* ================================================================ 1. @font-face — Suisse Intl (provided in /fonts/) ================================================================ */ @font-face { font-family: "Suisse Intl"; src: url("./fonts/suisse-intl-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: "Suisse Intl"; src: url("./fonts/suisse-intl-book.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Suisse Intl"; src: url("./fonts/suisse-intl-regular.woff2") format("woff2"); font-weight: 450; font-style: normal; font-display: swap; } @font-face { font-family: "Suisse Intl"; src: url("./fonts/suisse-intl-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Suisse Intl Mono"; src: url("./fonts/suisse-intl-mono-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Suisse Intl Mono"; src: url("./fonts/suisse-intl-mono-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } /* ================================================================ 2. BASE SCALES (theme-independent) ================================================================ */ :root { /* ── Brand — Indigo-violet with energy. Source: weave.entangle.com.au ── Primary flat brand colour: buttons, focus, active nav, accent borders/tints. Do NOT use the logo gradient outside the mark. */ --color-brand-50: #eef2ff; --color-brand-100: #e0e7ff; --color-brand-200: #c7d2fe; --color-brand-300: #a5b4fc; --color-brand-400: #818cf8; --color-brand-500: #635bff; /* anchor */ --color-brand-600: #5046e5; --color-brand-700: #4338ca; --color-brand-800: #3730a3; --color-brand-900: #312e81; --color-brand-950: #1e1b4b; /* ── Logo-lockup gradient — mark-only ── The Entangle infinity mark uses a 6-stop rainbow. This variable exists for reference and for the rare case you need to re-render the mark at a custom size. NEVER apply to buttons, text, surfaces, focus rings, borders, or backgrounds. The gradient lives inside the logo; the system uses indigo Brand + Coral for highlights. */ --logo-gradient: linear-gradient( 90deg, #FA8F2A 0%, #F56944 22%, #F4596E 42%, #EC4B98 58%, #C851E7 74%, #8B71F4 100% ); /* ── Coral — warm accent for CTAs, highlights, emphasis. ── */ --color-accent-coral-50: #fff7ed; --color-accent-coral-100: #ffedd5; --color-accent-coral-200: #fed7aa; --color-accent-coral-300: #fdba74; --color-accent-coral-400: #fb923c; --color-accent-coral-500: #f97316; /* anchor */ --color-accent-coral-600: #ea580c; --color-accent-coral-700: #c2410c; --color-accent-coral-800: #9a3412; --color-accent-coral-900: #7c2d12; --color-accent-coral-950: #431407; /* ── Mint — cool accent, success states, positive signals. ── */ --color-accent-mint-50: #ecfdf5; --color-accent-mint-100: #d1fae5; --color-accent-mint-200: #a7f3d0; --color-accent-mint-300: #6ee7b7; --color-accent-mint-400: #34d399; --color-accent-mint-500: #10b981; /* anchor */ --color-accent-mint-600: #059669; --color-accent-mint-700: #047857; --color-accent-mint-800: #065f46; --color-accent-mint-900: #064e3b; --color-accent-mint-950: #022c22; /* ── Sand — warm neutral accent for warmth and earthiness. ── */ --color-accent-sand-50: #fefce8; --color-accent-sand-100: #fef9c3; --color-accent-sand-200: #fef08a; --color-accent-sand-300: #fde047; --color-accent-sand-400: #facc15; --color-accent-sand-500: #eab308; /* anchor */ --color-accent-sand-600: #ca8a04; --color-accent-sand-700: #a16207; --color-accent-sand-800: #854d0e; --color-accent-sand-900: #713f12; --color-accent-sand-950: #422006; /* ── Neutral — warm grey with subtle olive undertone. ── */ --color-neutral-50: #fafafa; --color-neutral-100: #f5f5f5; --color-neutral-200: #e5e5e5; --color-neutral-300: #d4d4d4; --color-neutral-400: #a3a3a3; --color-neutral-500: #737373; --color-neutral-600: #525252; --color-neutral-700: #404040; --color-neutral-800: #262626; --color-neutral-900: #171717; --color-neutral-950: #0a0a0a; /* ── Status — 3-step scales (50 / 500 / 700). ── */ --color-status-positive-50: #ecfdf5; --color-status-positive-500: #10b981; --color-status-positive-700: #047857; --color-status-warning-50: #fffbeb; --color-status-warning-500: #f59e0b; --color-status-warning-700: #b45309; --color-status-critical-50: #fef2f2; --color-status-critical-500: #ef4444; --color-status-critical-700: #b91c1c; --color-status-info-50: #eff6ff; --color-status-info-500: #3b82f6; --color-status-info-700: #1d4ed8; /* ── Static ── */ --color-static-white: #FFFFFF; --color-static-black: #000000; /* ── Type stacks ── */ --font-family-display: "Suisse Intl", system-ui, -apple-system, sans-serif; --font-family-sans: "Suisse Intl", system-ui, -apple-system, sans-serif; --font-family-mono: "Suisse Intl Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --font-mono: var(--font-family-mono); /* alias used by button utilities */ /* ── Font sizes ── */ --font-size-xs: 12px; --font-size-sm: 14px; --font-size-md: 16px; --font-size-lg: 18px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 32px; --font-size-4xl: 40px; --font-size-5xl: 56px; --font-size-6xl: 72px; --font-size-7xl: 96px; /* ── Metrics ── */ --font-lineHeight-tight: 1.1; --font-lineHeight-snug: 1.25; --font-lineHeight-normal: 1.5; --font-lineHeight-relaxed: 1.625; --font-letterSpacing-tight: -0.02em; --font-letterSpacing-normal: 0em; --font-letterSpacing-wide: 0.04em; /* ── Spacing (8pt grid) ── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ── Radii ── */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Motion ── */ --motion-duration-xs: 80ms; --motion-duration-sm: 160ms; --motion-duration-md: 240ms; --motion-duration-lg: 400ms; --motion-easing-standard: cubic-bezier(0.2, 0, 0.2, 1); --motion-easing-entrance: cubic-bezier(0, 0, 0.2, 1); --motion-easing-exit: cubic-bezier(0.4, 0, 1, 1); --motion-easing-emphasis: cubic-bezier(0.2, 0, 0, 1); /* ── Semantic Type Roles ── */ /* Use these for h1, h2, p, etc. */ --font-display-2xl-size: var(--font-size-7xl); /* 96 */ --font-display-xl-size: var(--font-size-6xl); /* 72 */ --font-display-lg-size: var(--font-size-5xl); /* 56 */ --font-heading-lg-size: var(--font-size-4xl); /* 40 */ --font-heading-md-size: var(--font-size-2xl); /* 24 */ --font-body-lg-size: var(--font-size-lg); /* 18 */ --font-body-md-size: var(--font-size-md); /* 16 */ --font-body-sm-size: var(--font-size-sm); /* 14 */ --font-label-size: 11px; /* mono eyebrows */ } /* ================================================================ 3. THEME — DARK (default) ================================================================ */ :root, .dark { color-scheme: dark; --bg: #020617; /* body canvas */ --bg-card: hsla(230, 20%, 9%, 0.6); /* glass card */ --bg-card-hover: hsla(230, 20%, 9%, 0.75); --fg: #E3E7F0; --fg-muted: #727A8C; --fg-dimmed: #525252; --border: hsla(230, 15%, 15%, 0.6); --border-hover: hsla(230, 15%, 15%, 0.9); /* Primary (flat) — Indigo Brand */ --primary: #635BFF; --primary-fg: #FFFFFF; --primary-light: #818CF8; /* Tints used for focus/active/badge/card-accent */ --primary-tint-subtle: rgba(99,91,255,0.06); --primary-tint-medium: rgba(99,91,255,0.12); --primary-tint-strong: rgba(99,91,255,0.22); /* Atmosphere — subtle indigo glow from top-centre, very restrained */ --grain-opacity: 0.03; --body-gradient: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(99,91,255,0.07), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(99,91,255,0.04), transparent 60%); /* Brand glow / focus — indigo */ --shadow-brand-glow: 0 0 0 1px rgba(99,91,255,0.35), 0 4px 20px -4px rgba(99,91,255,0.45); --shadow-critical-glow: 0 0 0 1px rgba(239,68,68,0.3), 0 4px 16px -4px rgba(239,68,68,0.35); --shadow-focus-ring: 0 0 0 3px rgba(99,91,255,0.18); --shadow-focus-ring-critical: 0 0 0 3px rgba(239,68,68,0.15); /* Card/status accent borders + bg tints */ --color-brand-border-accent: rgba(99,91,255,0.40); --color-brand-bg-accent: rgba(99,91,255,0.05); --color-brand-bg-tint: rgba(99,91,255,0.12); /* Highlight — Coral. Used for inline highlights, pull-outs, and the rare second-tier CTA. Do NOT use for primary actions. */ --highlight-500: #F97316; --highlight-bg: rgba(249,115,22,0.14); --highlight-fg: #FDBA74; --color-status-positive-border: rgba(16,185,129,0.3); --color-status-positive-bg: rgba(16,185,129,0.04); --color-status-positive-bg-tint: rgba(16,185,129,0.10); --color-status-warning-border: rgba(245,158,11,0.3); --color-status-warning-bg: rgba(245,158,11,0.04); --color-status-warning-bg-tint: rgba(245,158,11,0.10); --color-status-critical-border: rgba(239,68,68,0.3); --color-status-critical-bg: rgba(239,68,68,0.04); --color-status-critical-bg-tint: rgba(239,68,68,0.10); /* Status fg (dark uses slightly brighter) */ --status-success: #10B981; --status-warning: #F59E0B; --status-error: #EF4444; /* Card inset highlight (1px white at top) */ --shadow-inset-highlight: 0 1px 0 0 hsla(0,0%,100%,0.03) inset; /* Shadows (dark-mode appropriate) */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.30); --shadow-md: 0 4px 6px rgba(0,0,0,0.30); --shadow-lg: 0 10px 15px rgba(0,0,0,0.30); --shadow-xl: 0 20px 25px rgba(0,0,0,0.30); /* Component tokens */ --color-bg-canvas: #020617; --color-bg-surface: hsla(230, 20%, 9%, 0.6); --color-bg-surface-muted: hsla(230, 20%, 9%, 0.75); --color-bg-elevated: hsla(230, 15%, 14%, 0.6); --color-bg-elevated-opaque: hsla(230, 20%, 9%, 0.95); --color-bg-inverse: #E5E5E5; --color-fg-primary: #E5E5E5; --color-fg-secondary: #A3A3A3; --color-fg-muted: #737373; --color-fg-disabled: #525252; --color-fg-on-brand: #FFFFFF; --color-border-default: rgba(255,255,255,0.10); --color-border-subtle: rgba(255,255,255,0.06); --color-border-strong: rgba(255,255,255,0.18); --color-border-focus: #635BFF; --color-action-primary-default: #635BFF; --color-action-primary-hover: #7C75FF; --color-action-primary-pressed: #5046E5; --color-action-primary-disabled: rgba(99,91,255,0.3); --color-action-primary-subtle: rgba(99,91,255,0.10); --color-action-critical-default: #EF4444; --color-action-critical-hover: #DC2626; } /* ================================================================ 4. THEME — LIGHT ================================================================ */ .light { color-scheme: light; --bg: #FFFFFF; --bg-card: hsla(220, 14%, 99%, 0.6); --bg-card-hover: hsla(220, 14%, 96%, 0.7); --fg: #0F1322; --fg-muted: #5C6675; --fg-dimmed: #8B95A5; --border: hsla(220, 18%, 90%, 0.6); --border-hover: hsla(220, 18%, 85%, 0.8); --primary: #635BFF; --primary-fg: #FFFFFF; --primary-light: #818CF8; --primary-tint-subtle: rgba(99,91,255,0.04); --primary-tint-medium: rgba(99,91,255,0.08); --primary-tint-strong: rgba(99,91,255,0.16); --grain-opacity: 0.02; --body-gradient: radial-gradient(ellipse 80% 55% at 50% 0%, rgba(99,91,255,0.05), transparent 70%), radial-gradient(ellipse 60% 50% at 100% 100%, rgba(99,91,255,0.03), transparent 60%); --shadow-brand-glow: 0 0 0 1px rgba(99,91,255,0.25), 0 4px 16px -4px rgba(99,91,255,0.32); --shadow-critical-glow: 0 0 0 1px rgba(239,68,68,0.25), 0 4px 16px -4px rgba(239,68,68,0.30); --shadow-focus-ring: 0 0 0 3px rgba(99,91,255,0.15); --shadow-focus-ring-critical: 0 0 0 3px rgba(239,68,68,0.15); --color-brand-border-accent: rgba(99,91,255,0.35); --color-brand-bg-accent: rgba(99,91,255,0.04); --color-brand-bg-tint: rgba(99,91,255,0.10); --highlight-500: #F97316; --highlight-bg: rgba(249,115,22,0.12); --highlight-fg: #C2410C; --color-status-positive-border: rgba(16,185,129,0.25); --color-status-positive-bg: rgba(16,185,129,0.04); --color-status-positive-bg-tint: rgba(16,185,129,0.10); --color-status-warning-border: rgba(245,158,11,0.25); --color-status-warning-bg: rgba(245,158,11,0.04); --color-status-warning-bg-tint: rgba(245,158,11,0.10); --color-status-critical-border: rgba(239,68,68,0.25); --color-status-critical-bg: rgba(239,68,68,0.04); --color-status-critical-bg-tint: rgba(239,68,68,0.10); --status-success: #059669; --status-warning: #D97706; --status-error: #DC2626; --shadow-inset-highlight: 0 1px 0 0 hsla(0,0%,100%,0.5) inset; --shadow-sm: 0 1px 2px rgba(0,0,0,0.06); --shadow-md: 0 4px 6px rgba(0,0,0,0.08); --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px rgba(0,0,0,0.12); --color-bg-canvas: #FFFFFF; --color-bg-surface: hsla(220, 14%, 99%, 0.6); --color-bg-surface-muted: hsla(220, 14%, 96%, 0.7); --color-bg-elevated: #FFFFFF; --color-bg-elevated-opaque: hsla(220, 14%, 99%, 0.97); --color-bg-inverse: #0F1322; --color-fg-primary: #0F1322; --color-fg-secondary: #5C6675; --color-fg-muted: #8B95A5; --color-fg-disabled: #A3A3A3; --color-fg-on-brand: #FFFFFF; --color-border-default: hsla(220,18%,90%,0.6); --color-border-subtle: hsla(220,18%,93%,0.6); --color-border-strong: hsla(220,18%,80%,0.8); --color-border-focus: #635BFF; --color-action-primary-default: #635BFF; --color-action-primary-hover: #5046E5; --color-action-primary-pressed: #4338CA; --color-action-primary-disabled: rgba(99,91,255,0.3); --color-action-primary-subtle: rgba(99,91,255,0.08); --color-action-critical-default: #EF4444; --color-action-critical-hover: #DC2626; } /* ================================================================ 5. GLOBAL BASE ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--body-gradient), var(--bg); color: var(--fg); font-family: var(--font-family-sans); font-size: var(--font-body-md-size); line-height: var(--font-lineHeight-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } ::selection { background: rgba(99,91,255,0.35); color: #fff; } /* Scrollbar */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-hover); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); } /* ================================================================ 6. SEMANTIC TYPE ROLES — h1..h6, p, code, eyebrow ================================================================ */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-family-display); color: var(--fg); font-weight: 300; /* hairline display — signature */ letter-spacing: var(--font-letterSpacing-tight); line-height: var(--font-lineHeight-tight); margin: 0; text-wrap: balance; } /* Use `em` inside a heading for a stylistic italic (never real italic — */ /* Suisse Intl italic isn't loaded). Light on light-italic Entangle uses */ /* light italic of Inter Tight via Next font fallback only in web app; */ /* here we keep roman throughout by default. */ h1 em, h2 em, h3 em { font-style: normal; color: var(--fg-muted); } h1 { font-size: clamp(48px, 8vw, 96px); letter-spacing: -0.03em; } h2 { font-size: clamp(36px, 5vw, 56px); } h3 { font-size: clamp(24px, 3vw, 32px); } h4 { font-size: 24px; } h5 { font-size: 18px; font-weight: 500; } h6 { font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-family-mono); color: var(--fg-muted); } p { font-family: var(--font-family-sans); font-size: var(--font-body-md-size); line-height: var(--font-lineHeight-relaxed); color: var(--fg-muted); margin: 0 0 var(--space-4) 0; text-wrap: pretty; } a { color: var(--primary); text-decoration: none; } a:hover { opacity: 0.85; } code, kbd, samp, pre { font-family: var(--font-family-mono); font-size: 13px; } /* Eyebrow — mono ALL-CAPS label before every headline. */ .eyebrow, p.eyebrow { font-family: var(--font-family-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.18em; color: var(--primary); margin: 0 0 16px 0; } .eyebrow--muted { color: var(--fg-muted); } .eyebrow--highlight { color: var(--highlight-500); } /* Inline highlight — Coral underline/swash on key phrases in display headlines. This is the Entangle way to call attention to a word WITHOUT using the logo gradient. */ .highlight { background: linear-gradient(transparent 62%, var(--highlight-bg) 62%); padding: 0 0.04em; } .highlight--strong { color: var(--highlight-500); } /* Display utility classes — map to DECISIONS.md compositions */ .display-2xl { font-family: var(--font-family-display); font-size: 96px; font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; } .display-xl { font-family: var(--font-family-display); font-size: 72px; font-weight: 300; line-height: 1.05; letter-spacing: -0.03em; } .display-lg { font-family: var(--font-family-display); font-size: 56px; font-weight: 300; line-height: 1.1; letter-spacing: -0.02em; } .heading-lg { font-family: var(--font-family-display); font-size: 40px; font-weight: 300; line-height: 1.15; letter-spacing: -0.02em; } .heading-md { font-family: var(--font-family-display); font-size: 24px; font-weight: 400; line-height: 1.25; letter-spacing: -0.01em; } .body-lg { font-family: var(--font-family-sans); font-size: 18px; line-height: 1.6; } .body-md { font-family: var(--font-family-sans); font-size: 16px; line-height: 1.625; } .body-sm { font-family: var(--font-family-sans); font-size: 14px; line-height: 1.5; } .label { font-family: var(--font-family-sans); font-size: 12px; font-weight: 500; letter-spacing: 0.04em; } .mono { font-family: var(--font-family-mono); font-size: 14px; } .mono-eyebrow{ font-family: var(--font-family-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; } /* ================================================================ 7. SIGNATURE PATTERNS — Glass card, grain, buttons ================================================================ */ .glass-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: var(--shadow-inset-highlight); transition: border-color 150ms ease, background-color 150ms ease; } .glass-card:hover { border-color: var(--border-hover); } /* Grain overlay — apply to a wrapper div, fixed position */ .grain { position: relative; } .grain::before { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-repeat: repeat; background-size: 256px 256px; opacity: var(--grain-opacity); mix-blend-mode: soft-light; } /* Page wrap — content container */ .page-wrap { max-width: 1280px; margin: 0 auto; padding: 64px 24px 96px; } /* Hide scrollbar utility */ .hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .hide-scrollbar::-webkit-scrollbar { display: none; } /* Buttons (pill + mono label — canonical Entangle Weave). Primary = indigo Brand. Secondary/Ghost = neutral. Critical = destructive. No gradient buttons — the gradient is locked to the logo mark only. */ .btn-primary, .btn-secondary, .btn-ghost, .btn-critical { display: inline-flex; align-items: center; gap: 6px; border-radius: 9999px; padding: 10px 20px; font-family: var(--font-family-mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.10em; transition: all 150ms ease; border: none; cursor: pointer; text-decoration: none; white-space: nowrap; } .btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-brand-glow); } .btn-primary:hover { background: var(--color-action-primary-hover); } .btn-secondary { background: transparent; color: var(--fg-muted); border: 1px solid var(--border); } .btn-secondary:hover { color: var(--fg); border-color: var(--border-hover); } .btn-ghost { background: transparent; color: var(--fg-muted); } .btn-ghost:hover { color: var(--fg); background: var(--primary-tint-subtle); } .btn-critical { background: var(--color-action-critical-default); color: #fff; box-shadow: var(--shadow-critical-glow); } .btn-critical:hover { opacity: 0.9; } /* Indigo hairline — used above eyebrows, below section headers */ .brand-rule { display: block; height: 2px; width: 48px; background: var(--primary); border-radius: 2px; } /* ================================================================ 8. ANIMATIONS (fade + stagger) ================================================================ */ @keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .animate-fade-up { animation: fadeUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) both; } .animate-fade-in { animation: fadeIn 0.3s ease-out both; } .delay-1 { animation-delay: 0.06s; } .delay-2 { animation-delay: 0.12s; } .delay-3 { animation-delay: 0.18s; } .delay-4 { animation-delay: 0.24s; } .delay-5 { animation-delay: 0.32s; } .delay-6 { animation-delay: 0.40s; } .delay-7 { animation-delay: 0.50s; } @media (prefers-reduced-motion: reduce) { .animate-fade-up, .animate-fade-in { animation: none !important; opacity: 1 !important; transform: none !important; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }