/* ============================================================================= MAGNET DS — the Vega Suite shared visual language ----------------------------------------------------------------------------- Extracted verbatim from the Magnet CRM (apps/crm) so every other app in the suite — kiosk, booking, landing, EOI, studio — can look like one product. Framework-free. No build step. No runtime network requests. Just: Theme: light is the default. Set data-theme on the root element to pin one: or Same token names in both themes — only the values change. Everything is namespaced `--mg-*` / `.mg-*` so it cannot collide with an app's existing CSS. ============================================================================= */ /* ----------------------------------------------------------------------------- 1. FONTS — self-hosted, latin subset only. Zero external requests. Weights limited to what the CRM actually uses: Inter Tight 400 500 600 700 Newsreader 400 500 + 400 italic JetBrains Mono 400 500 -------------------------------------------------------------------------- */ @font-face{font-family:'Inter Tight';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-tight-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-tight-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-tight-600-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Inter Tight';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/inter-tight-700-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/newsreader-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Newsreader';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/newsreader-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'Newsreader';font-style:italic;font-weight:400;font-display:swap;src:url('fonts/newsreader-400-italic-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/jetbrains-mono-400-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} @font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/jetbrains-mono-500-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;} /* ----------------------------------------------------------------------------- 2. TOKENS — theme-invariant (same in light and dark) -------------------------------------------------------------------------- */ :root { /* — type families — */ --mg-font-display: 'Newsreader', 'Tiempos Headline', Georgia, serif; --mg-font-sans: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --mg-font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace; /* — type scale (px, matches the CRM's real sizes) — */ --mg-text-2xs: 10px; /* micro caps labels */ --mg-text-xs: 11px; /* meta, counts */ --mg-text-sm: 12px; /* dense secondary */ --mg-text-base: 13px; /* BODY — the CRM's true body size */ --mg-text-md: 14px; --mg-text-lg: 17px; /* card heading */ --mg-text-xl: 20px; /* modal title */ --mg-display-sm: 24px; --mg-display-md: 30px; --mg-display-lg: 36px; /* stat value, page title */ --mg-display-xl: 40px; /* dashboard greeting */ --mg-leading-display: 1.05; --mg-leading-body: 1.5; --mg-tracking-tight: -0.02em; --mg-tracking-body: -0.005em; --mg-tracking-label: 0.16em; /* uppercase micro labels */ --mg-tracking-caps: 0.08em; /* — radii (as actually used in the CRM) — */ --mg-radius-sm: 8px; --mg-radius-md: 12px; /* buttons, inputs, nav items, pills */ --mg-radius-lg: 14px; --mg-radius-card: 18px; /* cards */ --mg-radius-xl: 20px; /* sidebar rail, modal panel */ --mg-radius-2xl: 28px; --mg-radius-pill: 999px; /* — spacing (4px base) — */ --mg-space-1: 4px; --mg-space-2: 8px; --mg-space-3: 12px; --mg-space-4: 16px; --mg-space-5: 20px; --mg-space-6: 24px; --mg-space-7: 32px; --mg-space-8: 48px; /* — control heights — */ --mg-h-sm: 32px; --mg-h-md: 36px; /* pills, chips, header controls */ --mg-h-lg: 40px; /* buttons */ --mg-h-input: 44px; /* — motion — */ --mg-ease-spring: cubic-bezier(0.34, 1.45, 0.64, 1); --mg-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --mg-dur-fast: 180ms; --mg-dur: 220ms; --mg-dur-slow: 360ms; /* — blur — */ --mg-blur: 24px; --mg-blur-lg: 32px; /* — layout — */ --mg-sidebar-w: 260px; --mg-header-h: 64px; --mg-z-header: 100; --mg-z-sidebar: 95; --mg-z-modal: 200; --mg-z-toast: 9999; } /* ----------------------------------------------------------------------------- 3. TOKENS — LIGHT (default; applies when no data-theme is set) -------------------------------------------------------------------------- */ :root, :root[data-theme="light"] { color-scheme: light; /* ground */ --mg-canvas: #FBF9F6; --mg-canvas-tint: #F4EFE7; --mg-canvas-deep: #ECE4D6; /* opaque surfaces (use when backdrop-filter is unavailable/undesirable) */ --mg-surface: #FFFFFF; --mg-surface-2: #FBF9F6; /* ink ramp */ --mg-ink: #1A1A1F; /* body text 16.49:1 on canvas */ --mg-ink-2: #4A4A53; /* secondary text 8.34:1 */ --mg-ink-3: #66666E; /* tertiary text / labels / placeholders >= 4.51:1 on EVERY light ground (CRM used #8B8B95 = 3.21:1 — see the doc) */ --mg-ink-4: #82828B; /* NON-TEXT only: borders, dividers, disabled glyphs. >= 3.02:1 */ --mg-ink-quiet: #8B8B95; /* the CRM's original ink-3. Decorative fills/dots only. */ --mg-ink-invert: #FFFFFF; /* text on --mg-ink fills */ /* hairlines */ --mg-line: rgba(26, 26, 31, 0.07); --mg-line-strong: rgba(26, 26, 31, 0.14); /* glass */ --mg-glass: rgba(255, 255, 255, 0.62); --mg-glass-strong: rgba(255, 255, 255, 0.82); --mg-glass-border: rgba(255, 255, 255, 0.70); /* marigold — the signature accent */ --mg-marigold: #F2A23B; --mg-marigold-soft: #FCEBCF; --mg-marigold-deep: #C9851F; --mg-marigold-text: #9F5A00; /* AA text: 5.08 canvas / 4.66 tint / 4.55 on soft. Fully saturated at marigold's own hue (34°) so it still reads amber, not mud. The CRM's #C9851F is only 2.91:1. */ --mg-on-marigold: #1A1A1F; /* text on a marigold fill */ /* moss — positive / success */ --mg-moss: #4A8775; --mg-moss-soft: #E0EBE5; --mg-moss-deep: #356458; --mg-moss-text: #3F7263; /* 5.26 / 4.83 / 4.52 */ --mg-on-moss: #FFFFFF; /* sky — informational */ --mg-sky: #5A8BD8; --mg-sky-soft: #E3ECF8; --mg-sky-deep: #3B6EBC; --mg-sky-text: #456BA6; /* 5.11 / 4.70 / 4.51 */ --mg-on-sky: #FFFFFF; /* rose — negative / destructive */ --mg-rose: #C97A6E; --mg-rose-soft: #F4E1DD; --mg-rose-deep: #A85447; --mg-rose-text: #90574F; /* 5.46 / 5.01 / 4.55 */ --mg-on-rose: #FFFFFF; /* neutral chip */ --mg-neutral-soft: #EDEDEF; /* elevation */ --mg-shadow-glass: 0 1px 0 rgba(255,255,255,0.9) inset, 0 12px 32px -8px rgba(26,26,31,0.08), 0 2px 6px -1px rgba(26,26,31,0.04); --mg-shadow-glass-lg: 0 1px 0 rgba(255,255,255,0.9) inset, 0 24px 60px -20px rgba(26,26,31,0.16), 0 4px 12px -2px rgba(26,26,31,0.06); --mg-shadow-card-hover: 0 1px 0 rgba(255,255,255,0.9) inset, 0 20px 48px -16px rgba(26,26,31,0.12), 0 2px 6px -1px rgba(26,26,31,0.04); --mg-shadow-ink: 0 6px 18px -6px rgba(26,26,31,0.4), 0 1px 0 rgba(255,255,255,0.08) inset; --mg-shadow-ink-hover: 0 10px 24px -8px rgba(26,26,31,0.5), 0 1px 0 rgba(255,255,255,0.08) inset; --mg-shadow-marigold: 0 8px 20px -6px rgba(242,162,59,0.45), 0 1px 0 rgba(255,255,255,0.6) inset; /* focus + scrim */ --mg-focus: 0 0 0 3px rgba(242, 162, 59, 0.55); --mg-focus-soft: 0 0 0 4px rgba(242, 162, 59, 0.16); --mg-scrim: rgba(26, 26, 31, 0.40); --mg-hover-wash: rgba(26, 26, 31, 0.04); --mg-track: rgba(26, 26, 31, 0.06); --mg-scroll-thumb: rgba(26, 26, 31, 0.18); /* the ambient warm gradient mesh */ --mg-mesh: radial-gradient(ellipse 900px 700px at 12% -10%, rgba(242, 162, 59, 0.08), transparent 60%), radial-gradient(ellipse 800px 600px at 92% 30%, rgba(139, 122, 181, 0.05), transparent 70%), radial-gradient(ellipse 1000px 800px at 50% 110%, rgba(74, 135, 117, 0.04), transparent 70%); } /* ----------------------------------------------------------------------------- 4. TOKENS — DARK Warm near-blacks (brown-black, never blue-grey). Marigold stays the accent. Same names, different values. -------------------------------------------------------------------------- */ :root[data-theme="dark"] { color-scheme: dark; --mg-canvas: #16130F; --mg-canvas-tint: #1F1B15; --mg-canvas-deep: #2A251D; --mg-surface: #221E18; --mg-surface-2: #1C1813; --mg-ink: #F7F3EA; /* 16.72:1 on canvas · 14.97:1 on surface */ --mg-ink-2: #CFC7B8; /* 11.03:1 · 9.88:1 */ --mg-ink-3: #A39A8A; /* 6.65:1 · 5.96:1 */ --mg-ink-4: #8E8676; /* NON-TEXT only: borders, dividers, disabled glyphs. >= 4.22:1 */ --mg-ink-quiet: #7A7263; /* decorative fills/dots only */ --mg-ink-invert: #16130F; /* text on --mg-ink fills */ --mg-line: rgba(247, 243, 234, 0.08); --mg-line-strong: rgba(247, 243, 234, 0.16); /* glass in dark = a warm light film, not an inverted sheet */ --mg-glass: rgba(255, 248, 238, 0.045); --mg-glass-strong: rgba(255, 248, 238, 0.075); --mg-glass-border: rgba(255, 244, 230, 0.10); --mg-marigold: #F2A23B; --mg-marigold-soft: #3A2C14; --mg-marigold-deep: #F7BC6B; --mg-marigold-text: #F7BC6B; /* 10.90:1 canvas · 9.76:1 surface · 7.97:1 on soft */ --mg-on-marigold: #16130F; --mg-moss: #7CC0A6; --mg-moss-soft: #1C2F28; --mg-moss-deep: #A2D6C2; --mg-moss-text: #7CC0A6; /* 8.77 · 7.85 · 6.69 on soft */ --mg-on-moss: #16130F; --mg-sky: #8FB4EC; --mg-sky-soft: #1B2434; --mg-sky-deep: #B4CDF4; --mg-sky-text: #8FB4EC; /* 8.74 · 7.82 · 7.35 on soft */ --mg-on-sky: #16130F; --mg-rose: #E5A093; --mg-rose-soft: #33211E; --mg-rose-deep: #F0BDB3; --mg-rose-text: #E5A093; /* 8.62 · 7.72 · 7.10 on soft */ --mg-on-rose: #16130F; --mg-neutral-soft: #26221B; --mg-shadow-glass: 0 1px 0 rgba(255,248,238,0.06) inset, 0 12px 32px -8px rgba(0,0,0,0.55), 0 2px 6px -1px rgba(0,0,0,0.35); --mg-shadow-glass-lg: 0 1px 0 rgba(255,248,238,0.06) inset, 0 24px 60px -20px rgba(0,0,0,0.7), 0 4px 12px -2px rgba(0,0,0,0.4); --mg-shadow-card-hover: 0 1px 0 rgba(255,248,238,0.09) inset, 0 20px 48px -16px rgba(0,0,0,0.65), 0 2px 6px -1px rgba(0,0,0,0.4); --mg-shadow-ink: 0 6px 18px -6px rgba(0,0,0,0.7), 0 1px 0 rgba(255,248,238,0.10) inset; --mg-shadow-ink-hover: 0 10px 24px -8px rgba(0,0,0,0.8), 0 1px 0 rgba(255,248,238,0.14) inset; --mg-shadow-marigold: 0 8px 20px -6px rgba(242,162,59,0.35), 0 1px 0 rgba(255,255,255,0.14) inset; --mg-focus: 0 0 0 3px rgba(242, 162, 59, 0.65); --mg-focus-soft: 0 0 0 4px rgba(242, 162, 59, 0.24); --mg-scrim: rgba(8, 6, 4, 0.66); --mg-hover-wash: rgba(255, 248, 238, 0.05); --mg-track: rgba(255, 248, 238, 0.08); --mg-scroll-thumb: rgba(255, 248, 238, 0.20); /* same mesh geometry, warmer + stronger so the dark ground still glows */ --mg-mesh: radial-gradient(ellipse 900px 700px at 12% -10%, rgba(242, 162, 59, 0.11), transparent 60%), radial-gradient(ellipse 800px 600px at 92% 30%, rgba(139, 122, 181, 0.08), transparent 70%), radial-gradient(ellipse 1000px 800px at 50% 110%, rgba(74, 135, 117, 0.07), transparent 70%); } /* ----------------------------------------------------------------------------- 5. SEMANTIC ALIASES — so apps don't have to know the poetic names -------------------------------------------------------------------------- */ :root { --mg-accent: var(--mg-marigold); --mg-accent-soft: var(--mg-marigold-soft); --mg-accent-text: var(--mg-marigold-text); --mg-success: var(--mg-moss); --mg-success-soft: var(--mg-moss-soft); --mg-success-text: var(--mg-moss-text); --mg-info: var(--mg-sky); --mg-info-soft: var(--mg-sky-soft); --mg-info-text: var(--mg-sky-text); --mg-danger: var(--mg-rose); --mg-danger-soft: var(--mg-rose-soft); --mg-danger-text: var(--mg-rose-text); --mg-warn: var(--mg-marigold); --mg-warn-soft: var(--mg-marigold-soft); --mg-warn-text: var(--mg-marigold-text); } /* ----------------------------------------------------------------------------- 6. BASE — typography, ground, mesh -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--mg-canvas); color: var(--mg-ink); font-family: var(--mg-font-sans); font-size: var(--mg-text-base); line-height: var(--mg-leading-body); letter-spacing: var(--mg-tracking-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* Ambient warm gradient mesh behind everything (the CRM's signature ground). */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--mg-mesh), var(--mg-canvas); } /* Scoped version, for apps that can't style . */ .mg-mesh { position: relative; background: var(--mg-mesh), var(--mg-canvas); } ::selection { background: var(--mg-marigold-soft); color: var(--mg-marigold-text); } /* Display serif against the tight sans — the Magnet pairing. */ .mg-display, .mg-page-title, .mg-h2, .mg-h3, .mg-modal-title, .mg-stat-value, .mg-empty-title { font-family: var(--mg-font-display); font-weight: 500; letter-spacing: var(--mg-tracking-tight); line-height: var(--mg-leading-display); color: var(--mg-ink); margin: 0; } .mg-mono, .mg-num { font-family: var(--mg-font-mono); font-variant-numeric: tabular-nums; } .mg-page-title { font-size: var(--mg-display-lg); } @media (min-width: 640px) { .mg-page-title { font-size: var(--mg-display-xl); } } .mg-page-title em { font-style: italic; font-weight: 400; color: var(--mg-marigold-text); } .mg-page-sub { margin: 6px 0 0; font-size: var(--mg-text-base); color: var(--mg-ink-3); } .mg-h2 { font-size: var(--mg-text-xl); } .mg-h3 { font-size: var(--mg-text-lg); } /* Uppercase micro-label — the CRM's quiet eyebrow. */ .mg-eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: var(--mg-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--mg-tracking-label); color: var(--mg-ink-3); } /* Section header: title block left, actions right. */ .mg-section-head { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--mg-space-4); margin-bottom: 28px; } .mg-section-head-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* ----------------------------------------------------------------------------- 7. FOCUS — visible everywhere, marigold ring -------------------------------------------------------------------------- */ .mg-btn:focus-visible, .mg-input:focus-visible, .mg-select:focus-visible, .mg-textarea:focus-visible, .mg-chip:focus-visible, .mg-pill:focus-visible, .mg-filter-chip:focus-visible, .mg-nav-item:focus-visible, .mg-card:focus-visible, .mg-stat:focus-visible, .mg-modal-close:focus-visible, .mg-toast-action:focus-visible, .mg-check:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mg-marigold); outline-offset: 2px; box-shadow: var(--mg-focus-soft); } /* ----------------------------------------------------------------------------- 8. SURFACES -------------------------------------------------------------------------- */ .mg-glass { background: var(--mg-glass-strong); -webkit-backdrop-filter: blur(var(--mg-blur)) saturate(180%); backdrop-filter: blur(var(--mg-blur)) saturate(180%); border: 1px solid var(--mg-glass-border); box-shadow: var(--mg-shadow-glass); } .mg-glass-soft { background: var(--mg-glass); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--mg-glass-border); } .mg-card { background: var(--mg-glass-strong); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid var(--mg-glass-border); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-glass); overflow: hidden; transition: transform 240ms var(--mg-ease-out), box-shadow 240ms ease; } .mg-card-pad { padding: var(--mg-space-5); } .mg-card-hover { cursor: pointer; } .mg-card-hover:hover { transform: translateY(-1px); box-shadow: var(--mg-shadow-card-hover); } /* Opaque variant — for print, and for surfaces stacked on other surfaces where a second layer of blur would muddy things. */ .mg-panel { background: var(--mg-surface); border: 1px solid var(--mg-line-strong); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-glass); } .mg-divider { height: 1px; border: 0; margin: var(--mg-space-4) 0; background: var(--mg-line); } .mg-divider-v { width: 1px; align-self: stretch; background: var(--mg-line-strong); } /* ----------------------------------------------------------------------------- 9. BUTTONS -------------------------------------------------------------------------- */ .mg-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mg-space-2); height: var(--mg-h-lg); padding: 0 var(--mg-space-4); border: 1px solid transparent; border-radius: var(--mg-radius-md); font-family: inherit; font-size: var(--mg-text-md); font-weight: 600; letter-spacing: var(--mg-tracking-body); line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--mg-dur) var(--mg-ease-spring), box-shadow var(--mg-dur) ease, background var(--mg-dur) var(--mg-ease-out), color var(--mg-dur) var(--mg-ease-out), border-color var(--mg-dur) var(--mg-ease-out); } .mg-btn:disabled, .mg-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none !important; } .mg-btn-sm { height: var(--mg-h-sm); padding: 0 var(--mg-space-3); font-size: var(--mg-text-sm); } .mg-btn-lg { height: 48px; padding: 0 var(--mg-space-6); font-size: 15px; } .mg-btn-icon { width: var(--mg-h-lg); padding: 0; } .mg-btn-block { width: 100%; } .mg-btn-primary { background: var(--mg-ink); color: var(--mg-ink-invert); box-shadow: var(--mg-shadow-ink); } .mg-btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: var(--mg-shadow-ink-hover); } .mg-btn-primary:active:not(:disabled) { transform: translateY(0); } .mg-btn-accent { background: var(--mg-marigold); color: var(--mg-on-marigold); box-shadow: var(--mg-shadow-marigold); } .mg-btn-accent:hover:not(:disabled) { transform: translateY(-1px); } .mg-btn-accent:active:not(:disabled) { transform: translateY(0); } .mg-btn-secondary { background: var(--mg-glass-strong); color: var(--mg-ink-2); border-color: var(--mg-line-strong); font-weight: 500; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); } .mg-btn-secondary:hover:not(:disabled) { background: var(--mg-surface); color: var(--mg-ink); border-color: var(--mg-line-strong); transform: translateY(-1px); } .mg-btn-ghost { background: transparent; color: var(--mg-ink-2); font-weight: 500; } .mg-btn-ghost:hover:not(:disabled) { background: var(--mg-hover-wash); color: var(--mg-ink); } .mg-btn-danger { background: var(--mg-rose-deep); color: var(--mg-on-rose); box-shadow: 0 6px 18px -6px rgba(168, 84, 71, 0.5); } .mg-btn-danger:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); } .mg-btn-danger:active:not(:disabled) { transform: translateY(0); } /* ----------------------------------------------------------------------------- 10. FORMS -------------------------------------------------------------------------- */ .mg-field { display: block; margin-bottom: var(--mg-space-4); } .mg-label { display: block; margin-bottom: 6px; font-size: var(--mg-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--mg-tracking-label); color: var(--mg-ink-3); } .mg-label-req::after { content: ' *'; color: var(--mg-rose-text); } .mg-input, .mg-select, .mg-textarea { display: block; width: 100%; box-sizing: border-box; height: var(--mg-h-input); padding: 0 14px; background: var(--mg-surface); border: 1px solid var(--mg-line-strong); border-radius: var(--mg-radius-md); color: var(--mg-ink); font-family: inherit; font-size: var(--mg-text-md); letter-spacing: var(--mg-tracking-body); transition: background var(--mg-dur) var(--mg-ease-out), border-color var(--mg-dur) var(--mg-ease-out), box-shadow var(--mg-dur) var(--mg-ease-out); outline: none; } .mg-textarea { height: auto; min-height: 96px; padding: 10px 14px; line-height: 1.5; resize: vertical; } /* Placeholders are text and must meet AA — ink-3, never ink-4. */ .mg-input::placeholder, .mg-textarea::placeholder { color: var(--mg-ink-3); opacity: 1; } .mg-input:hover:not(:disabled), .mg-select:hover:not(:disabled), .mg-textarea:hover:not(:disabled) { border-color: var(--mg-line-strong); } .mg-input:focus, .mg-select:focus, .mg-textarea:focus { border-color: var(--mg-marigold); box-shadow: var(--mg-focus-soft); } .mg-input:disabled, .mg-select:disabled, .mg-textarea:disabled { opacity: 0.55; cursor: not-allowed; background: var(--mg-canvas-tint); } .mg-input.is-error, .mg-select.is-error, .mg-textarea.is-error { border-color: var(--mg-rose-deep); } /* Select: native arrow removed, marigold chevron drawn inline (data URI, no request). */ .mg-select { appearance: none; -webkit-appearance: none; padding-right: 38px; /* chevron: base64 so the stylesheet contains no literal http(s) string at all. Decodes to a 14px SVG chevron stroked #C9851F. Inline data — never fetched. */ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PScxNCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyNDOTg1MUYnIHN0cm9rZS13aWR0aD0nMi41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxwYXRoIGQ9J002IDlsNiA2IDYtNicvPjwvc3ZnPg=="); background-repeat: no-repeat; background-position: right 13px center; } :root[data-theme="dark"] .mg-select { /* same chevron, stroked #F7BC6B for dark */ background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNCcgaGVpZ2h0PScxNCcgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyBzdHJva2U9JyNGN0JDNkInIHN0cm9rZS13aWR0aD0nMi41JyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnPjxwYXRoIGQ9J002IDlsNiA2IDYtNicvPjwvc3ZnPg=="); } .mg-select option { background: var(--mg-surface); color: var(--mg-ink); } .mg-hint { margin: 6px 0 0; font-size: var(--mg-text-xs); color: var(--mg-ink-3); } .mg-error { margin: 6px 0 0; font-size: var(--mg-text-xs); color: var(--mg-rose-text); font-weight: 500; } .mg-check { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; flex-shrink: 0; border: 1px solid var(--mg-line-strong); border-radius: 5px; background: var(--mg-surface); cursor: pointer; display: inline-grid; place-content: center; transition: all var(--mg-dur-fast) var(--mg-ease-out); } .mg-check::after { content: ''; width: 9px; height: 5px; border-left: 2px solid var(--mg-on-marigold); border-bottom: 2px solid var(--mg-on-marigold); transform: rotate(-45deg) translateY(-1px); opacity: 0; } .mg-check:checked { background: var(--mg-marigold); border-color: var(--mg-marigold); } .mg-check:checked::after { opacity: 1; } .mg-check[type="radio"] { border-radius: 50%; } /* ----------------------------------------------------------------------------- 11. TABLE -------------------------------------------------------------------------- */ .mg-table-wrap { width: 100%; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--mg-scroll-thumb) transparent; } .mg-table-wrap::-webkit-scrollbar { width: 6px; height: 6px; } .mg-table-wrap::-webkit-scrollbar-track { background: transparent; } .mg-table-wrap::-webkit-scrollbar-thumb { background: var(--mg-scroll-thumb); border-radius: 4px; } .mg-table { width: 100%; border-collapse: collapse; font-size: var(--mg-text-md); } .mg-table th { padding: 12px 20px; text-align: left; font-size: var(--mg-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mg-ink-3); white-space: nowrap; background: var(--mg-glass); border-bottom: 1px solid var(--mg-line); } .mg-table td { padding: 14px 20px; vertical-align: middle; color: var(--mg-ink-2); border-bottom: 1px solid var(--mg-line); } .mg-table tbody tr { transition: background var(--mg-dur-fast) var(--mg-ease-out); } .mg-table tbody tr:hover td { background: var(--mg-hover-wash); color: var(--mg-ink); } .mg-table tbody tr:last-child td { border-bottom: none; } /* Numeric cell — mono, tabular, right-aligned. */ .mg-table th.mg-num, .mg-table td.mg-num { text-align: right; font-family: var(--mg-font-mono); font-variant-numeric: tabular-nums; font-size: var(--mg-text-base); color: var(--mg-ink); } .mg-table th.mg-num { font-family: var(--mg-font-sans); font-size: var(--mg-text-2xs); } .mg-table .mg-cell-strong { color: var(--mg-ink); font-weight: 600; } /* ----------------------------------------------------------------------------- 12. CHIPS / BADGES / PILLS -------------------------------------------------------------------------- */ /* Status badge — semantic tint + leading dot (the CRM's status-pill). */ .mg-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid transparent; border-radius: var(--mg-radius-sm); font-family: inherit; font-size: var(--mg-text-xs); font-weight: 600; letter-spacing: 0.01em; line-height: 1.4; white-space: nowrap; background: var(--mg-neutral-soft); color: var(--mg-ink-2); } .mg-chip::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .mg-chip-plain::before { display: none; } .mg-chip-marigold { background: var(--mg-marigold-soft); color: var(--mg-marigold-text); } .mg-chip-marigold::before { background: var(--mg-marigold); } .mg-chip-moss { background: var(--mg-moss-soft); color: var(--mg-moss-text); } .mg-chip-moss::before { background: var(--mg-moss); } .mg-chip-sky { background: var(--mg-sky-soft); color: var(--mg-sky-text); } .mg-chip-sky::before { background: var(--mg-sky); } .mg-chip-rose { background: var(--mg-rose-soft); color: var(--mg-rose-text); } .mg-chip-rose::before { background: var(--mg-rose); } .mg-chip-neutral { background: var(--mg-neutral-soft); color: var(--mg-ink-2); } .mg-chip-neutral::before { background: var(--mg-ink-3); } /* aliases */ .mg-chip-success { background: var(--mg-moss-soft); color: var(--mg-moss-text); } .mg-chip-success::before { background: var(--mg-moss); } .mg-chip-info { background: var(--mg-sky-soft); color: var(--mg-sky-text); } .mg-chip-info::before { background: var(--mg-sky); } .mg-chip-warn { background: var(--mg-marigold-soft); color: var(--mg-marigold-text); } .mg-chip-warn::before { background: var(--mg-marigold); } .mg-chip-danger { background: var(--mg-rose-soft); color: var(--mg-rose-text); } .mg-chip-danger::before { background: var(--mg-rose); } /* Pill — an interactive secondary control (the CRM's .pill). */ .mg-pill { display: inline-flex; align-items: center; gap: 6px; height: var(--mg-h-md); padding: 0 14px; background: var(--mg-glass-strong); color: var(--mg-ink-2); border: 1px solid var(--mg-line-strong); border-radius: var(--mg-radius-md); font-family: inherit; font-size: var(--mg-text-md); font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); transition: all var(--mg-dur) var(--mg-ease-out); } .mg-pill:hover:not(:disabled) { background: var(--mg-surface); color: var(--mg-ink); } .mg-pill:disabled { opacity: 0.5; cursor: not-allowed; } .mg-pill-dark { background: var(--mg-ink); color: var(--mg-ink-invert); border-color: var(--mg-ink); font-weight: 600; } .mg-pill-dark:hover:not(:disabled) { background: var(--mg-ink); color: var(--mg-ink-invert); transform: translateY(-1px); } /* Filter chip — small, toggleable. */ .mg-filter-chip { display: inline-flex; align-items: center; gap: 6px; height: var(--mg-h-sm); padding: 0 12px; background: var(--mg-glass); color: var(--mg-ink-2); border: 1px solid var(--mg-line-strong); border-radius: var(--mg-radius-sm); font-family: inherit; font-size: var(--mg-text-sm); font-weight: 500; white-space: nowrap; cursor: pointer; transition: all var(--mg-dur-fast) var(--mg-ease-out); } .mg-filter-chip:hover:not(:disabled) { background: var(--mg-surface); color: var(--mg-ink); } .mg-filter-chip.is-on { background: var(--mg-ink); color: var(--mg-ink-invert); border-color: var(--mg-ink); } .mg-filter-chip:disabled { opacity: 0.4; cursor: not-allowed; } /* Keyboard hint. */ .mg-kbd { display: inline-flex; align-items: center; justify-content: center; padding: 1px 6px; font-family: var(--mg-font-mono); font-size: var(--mg-text-2xs); color: var(--mg-ink-3); background: var(--mg-track); border: 1px solid var(--mg-line); border-radius: 4px; } /* ----------------------------------------------------------------------------- 13. STAT TILE -------------------------------------------------------------------------- */ .mg-stat { display: block; padding: var(--mg-space-4); text-decoration: none; background: var(--mg-glass-strong); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); border: 1px solid var(--mg-glass-border); border-radius: var(--mg-radius-card); box-shadow: var(--mg-shadow-glass); transition: transform 240ms var(--mg-ease-out), box-shadow 240ms ease; } a.mg-stat:hover, .mg-stat.mg-card-hover:hover { transform: translateY(-1px); box-shadow: var(--mg-shadow-card-hover); } .mg-stat-label { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: var(--mg-tracking-caps); color: var(--mg-ink-3); } .mg-stat-label svg { color: var(--mg-ink-2); flex-shrink: 0; } .mg-stat-value { font-size: var(--mg-display-lg); } .mg-stat-sub { display: flex; align-items: center; gap: 4px; margin: 4px 0 0; font-size: var(--mg-text-sm); color: var(--mg-ink-3); } .mg-stat-delta { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; } .mg-stat-delta.is-up { color: var(--mg-moss-text); } .mg-stat-delta.is-dn { color: var(--mg-rose-text); } /* Thin progress bar (pipeline-by-stage rows). */ .mg-bar { display: block; flex: 1; height: 4px; border-radius: var(--mg-radius-pill); background: var(--mg-track); overflow: hidden; } .mg-bar-fill { display: block; height: 100%; border-radius: var(--mg-radius-pill); background: var(--mg-marigold); opacity: 0.75; transition: width var(--mg-dur-slow) var(--mg-ease-out); } .mg-bar-row { display: flex; align-items: center; gap: var(--mg-space-3); font-size: 12.5px; padding: 3px 0; } .mg-bar-row-label { width: 150px; flex-shrink: 0; color: var(--mg-ink-2); font-weight: 500; } .mg-bar-row-value { width: 34px; text-align: right; font-family: var(--mg-font-mono); font-variant-numeric: tabular-nums; font-weight: 500; color: var(--mg-ink); } /* ----------------------------------------------------------------------------- 14. EMPTY STATE -------------------------------------------------------------------------- */ .mg-empty { text-align: center; padding: 64px var(--mg-space-6); } .mg-empty-icon { width: 48px; height: 48px; margin: 0 auto var(--mg-space-3); display: flex; align-items: center; justify-content: center; border-radius: var(--mg-radius-lg); background: var(--mg-canvas-tint); color: var(--mg-ink-3); } .mg-empty-title { font-size: 18px; } .mg-empty-body { margin: 4px auto 0; max-width: 42ch; font-size: var(--mg-text-base); color: var(--mg-ink-3); } .mg-empty .mg-btn { margin-top: var(--mg-space-5); } /* ----------------------------------------------------------------------------- 15. SIDEBAR / NAV -------------------------------------------------------------------------- */ .mg-sidebar { width: var(--mg-sidebar-w); display: flex; flex-direction: column; background: var(--mg-glass-strong); -webkit-backdrop-filter: blur(var(--mg-blur)) saturate(180%); backdrop-filter: blur(var(--mg-blur)) saturate(180%); border: 1px solid var(--mg-glass-border); border-radius: var(--mg-radius-xl); box-shadow: var(--mg-shadow-glass); overflow: hidden; } .mg-sidebar-head { padding: 24px 20px 16px; } .mg-sidebar-foot { padding: 14px 16px; border-top: 1px solid var(--mg-line); display: flex; align-items: center; gap: 10px; } .mg-nav { padding: 0 12px 8px; } .mg-nav-group { margin-bottom: var(--mg-space-5); } .mg-nav-label { padding: 0 10px; margin-bottom: 6px; font-size: var(--mg-text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--mg-tracking-label); color: var(--mg-ink-3); } .mg-nav-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 2px; border-radius: var(--mg-radius-md); font-size: var(--mg-text-base); font-weight: 500; color: var(--mg-ink-2); text-decoration: none; cursor: pointer; transition: all var(--mg-dur-fast) var(--mg-ease-out); } .mg-nav-item svg { flex-shrink: 0; opacity: 0.8; } /* the label span grows; the count badge must NOT (it would stretch into a slab) */ .mg-nav-item > span:not(.mg-nav-count) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mg-nav-item:hover { background: var(--mg-hover-wash); color: var(--mg-ink); } .mg-nav-item.is-active { background: var(--mg-ink); color: var(--mg-ink-invert); box-shadow: 0 4px 12px -4px rgba(26,26,31,0.3), 0 1px 0 rgba(255,255,255,0.1) inset; } .mg-nav-item.is-active svg { opacity: 1; } .mg-nav-count { flex-shrink: 0; padding: 1px 6px; border-radius: 5px; font-family: var(--mg-font-mono); font-variant-numeric: tabular-nums; font-size: var(--mg-text-xs); background: var(--mg-track); color: var(--mg-ink-3); } .mg-nav-item.is-active .mg-nav-count { background: rgba(255,255,255,0.16); color: rgba(255,255,255,0.85); } :root[data-theme="dark"] .mg-nav-item.is-active .mg-nav-count { background: rgba(22,19,15,0.18); color: rgba(22,19,15,0.8); } .mg-avatar { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--mg-radius-md); font-size: var(--mg-text-sm); font-weight: 600; color: #fff; background: linear-gradient(135deg, #C97A6E, #A85447); } .mg-avatar-ink { background: linear-gradient(135deg, #2A2A33, #1A1A1F); } /* ----------------------------------------------------------------------------- 16. MODAL / SHEET -------------------------------------------------------------------------- */ .mg-scrim { position: fixed; inset: 0; z-index: var(--mg-z-modal); display: flex; align-items: center; justify-content: center; padding: var(--mg-space-4); background: var(--mg-scrim); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; } .mg-modal { width: 100%; max-width: 480px; max-height: 90vh; display: flex; flex-direction: column; background: var(--mg-glass-strong); -webkit-backdrop-filter: blur(var(--mg-blur-lg)) saturate(180%); backdrop-filter: blur(var(--mg-blur-lg)) saturate(180%); border: 1px solid var(--mg-glass-border); border-radius: var(--mg-radius-xl); box-shadow: var(--mg-shadow-glass-lg); overflow: hidden; animation: mg-fade-in var(--mg-dur-slow) var(--mg-ease-out); } /* The blur needs something opaque behind it inside a scrim, or the scrim shows through and text loses contrast. */ .mg-modal { background-color: var(--mg-surface); } .mg-modal-lg { max-width: 720px; } .mg-modal-head { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--mg-space-2); padding: 20px var(--mg-space-6); border-bottom: 1px solid var(--mg-line); } .mg-modal-title { font-size: var(--mg-text-xl); } .mg-modal-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: var(--mg-radius-sm); background: transparent; color: var(--mg-ink-3); cursor: pointer; transition: all var(--mg-dur-fast) var(--mg-ease-out); } .mg-modal-close:hover { background: var(--mg-hover-wash); color: var(--mg-ink); } .mg-modal-body { flex: 1; overflow-y: auto; padding: var(--mg-space-6); scrollbar-width: thin; scrollbar-color: var(--mg-scroll-thumb) transparent; } .mg-modal-foot { flex-shrink: 0; display: flex; align-items: center; justify-content: flex-end; gap: var(--mg-space-2); padding: var(--mg-space-4) var(--mg-space-6); border-top: 1px solid var(--mg-line); background: var(--mg-surface); } /* Bottom sheet — same panel, docked to the bottom edge on small screens. */ .mg-sheet { margin-top: auto; max-width: 100%; border-radius: var(--mg-radius-xl) var(--mg-radius-xl) 0 0; animation: mg-sheet-up var(--mg-dur-slow) var(--mg-ease-out); } .mg-sheet-grip { width: 36px; height: 4px; margin: 10px auto 0; border-radius: var(--mg-radius-pill); background: var(--mg-line-strong); } /* ----------------------------------------------------------------------------- 17. TOAST -------------------------------------------------------------------------- */ .mg-toast-wrap { position: fixed; inset-inline: 0; bottom: var(--mg-space-4); z-index: var(--mg-z-toast); display: flex; flex-direction: column; align-items: center; gap: var(--mg-space-2); padding: 0 var(--mg-space-4); pointer-events: none; } .mg-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--mg-space-3); max-width: 560px; padding: 12px var(--mg-space-4); background: var(--mg-surface); border: 1px solid var(--mg-line-strong); border-radius: var(--mg-radius-md); box-shadow: var(--mg-shadow-glass-lg); font-size: var(--mg-text-base); color: var(--mg-ink); animation: mg-toast-in var(--mg-dur-slow) var(--mg-ease-spring); } .mg-toast-icon { flex-shrink: 0; display: flex; color: var(--mg-marigold-text); } .mg-toast-success .mg-toast-icon { color: var(--mg-moss-text); } .mg-toast-danger .mg-toast-icon { color: var(--mg-rose-text); } .mg-toast-info .mg-toast-icon { color: var(--mg-sky-text); } .mg-toast-msg { flex: 1; min-width: 0; } .mg-toast-action { flex-shrink: 0; padding: 6px 12px; border: 0; border-radius: var(--mg-radius-sm); background: var(--mg-ink); color: var(--mg-ink-invert); font-family: inherit; font-size: var(--mg-text-base); font-weight: 600; cursor: pointer; transition: opacity var(--mg-dur-fast) ease; } .mg-toast-action:hover { opacity: 0.88; } .mg-toast-close { flex-shrink: 0; display: inline-flex; border: 0; background: transparent; color: var(--mg-ink-3); cursor: pointer; padding: 2px; } .mg-toast-close:hover { color: var(--mg-ink); } /* ----------------------------------------------------------------------------- 18. UTILITIES -------------------------------------------------------------------------- */ .mg-scroll-thin { scrollbar-width: thin; scrollbar-color: var(--mg-scroll-thumb) transparent; } .mg-scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; } .mg-scroll-thin::-webkit-scrollbar-track { background: transparent; } .mg-scroll-thin::-webkit-scrollbar-thumb { background: var(--mg-scroll-thumb); border-radius: 4px; } .mg-muted { color: var(--mg-ink-3); } .mg-strong { color: var(--mg-ink); font-weight: 600; } .mg-balance { text-wrap: balance; } .mg-pretty { text-wrap: pretty; } .mg-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mg-grid { display: grid; gap: var(--mg-space-3); } .mg-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mg-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .mg-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .mg-grid-3, .mg-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .mg-grid-2, .mg-grid-3, .mg-grid-4 { grid-template-columns: minmax(0, 1fr); } } .mg-row { display: flex; align-items: center; gap: var(--mg-space-2); flex-wrap: wrap; } .mg-stack > * + * { margin-top: var(--mg-space-3); } .mg-fade-in { animation: mg-fade-in var(--mg-dur-slow) var(--mg-ease-out); } .mg-spin { animation: mg-spin 900ms linear infinite; } @keyframes mg-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } @keyframes mg-sheet-up { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes mg-toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @keyframes mg-spin { to { transform: rotate(360deg); } } /* ----------------------------------------------------------------------------- 19. REDUCED MOTION -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .mg-card-hover:hover, .mg-btn:hover, .mg-pill-dark:hover, a.mg-stat:hover { transform: none !important; } } /* ----------------------------------------------------------------------------- 20. TOUCH + PRINT -------------------------------------------------------------------------- */ /* iOS Safari zooms the viewport when a focused control is under 16px. */ @media (pointer: coarse) { .mg-input, .mg-select, .mg-textarea { font-size: 16px; } } @media print { body { background: #fff !important; color: #000; } body::before { display: none !important; } .mg-card, .mg-panel, .mg-stat, .mg-sidebar { background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; box-shadow: none !important; border-color: #ddd !important; } .mg-print-hide { display: none !important; } .mg-print-keep { break-inside: avoid; } }