/* * This is a manifest file that'll be compiled into application.css. * * With Propshaft, assets are served efficiently without preprocessing steps. You can still include * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard * cascading order, meaning styles declared later in the document or manifest will override earlier ones, * depending on specificity. * * Consider organizing styles into separate files for maintainability. */ /* files: - form.css has CSS classes related to forms (create and update); - record.css has the CSS classes used on show and index views. */ /* ============================================================ Design tokens — define once, use everywhere via var() ============================================================ */ :root { /* ---------------------------------------------------------- Colors — Neutral ---------------------------------------------------------- */ --color-white: #ffffff; --color-bg-subtle: #f7f9fb; /* base layer background */ --color-border-subtle: #e8eff3; /* surface-container — tonal shift, no hard line */ --color-border: #c8d8e2; /* surface-container-highest */ --color-border-medium: #b0c4cc; /* outline-variant */ --color-border-strong: #8aa4ae; /* stronger outline */ --color-text-muted: #6b7f84; /* muted on-surface */ --color-text-secondary: #4a5c63; /* on-surface-variant */ --color-text-body: #2a3439; /* on-surface */ --color-text: #2a3439; /* on-surface */ --color-text-strong: #2a3439; /* on-surface — no pure black */ /* ---------------------------------------------------------- Colors — Primary (brand / actions) ---------------------------------------------------------- */ --color-primary: #465f88; /* steel blue */ --color-primary-hover: #3a537c; /* primary-dim */ /* ---------------------------------------------------------- Colors — Action (interactive links and secondary buttons) ---------------------------------------------------------- */ --color-action-bg: #dce4f5; /* primary-container */ --color-action-bg-alt: #e8e7f2; /* tertiary-container */ --color-action-border-subtle: #c8d4e8; /* subtle primary border */ --color-action: #465f88; /* primary steel blue */ --color-action-hover: #3a537c; /* primary-dim */ /* ---------------------------------------------------------- Colors — Pending state ---------------------------------------------------------- */ --color-pending: #ea580c; /* orange-600 */ /* ---------------------------------------------------------- Colors — Upload component (indigo) ---------------------------------------------------------- */ --color-upload: #4f46e5; /* indigo-600 — upload button bg */ --color-upload-hover: #4338ca; /* indigo-700 — upload button hover + percentage text */ --color-upload-border-hover: #6366f1; /* indigo-500 — dropzone hover border + spinner accent */ /* ---------------------------------------------------------- Colors — Focus ---------------------------------------------------------- */ --color-focus: #465f88; --color-focus-ring: #5a7ab5; /* ---------------------------------------------------------- Colors — Error ---------------------------------------------------------- */ --color-error-bg: #fef2f2; --color-error-border-subtle: #fee2e2; --color-error-border: #f87171; --color-error: #ef4444; --color-error-focus: #dc2626; --color-error-strong: #991b1b; /* ---------------------------------------------------------- Colors — Success ---------------------------------------------------------- */ --color-success-bg: #f0fdf4; --color-success-border: #dcfce7; /* green-100 */ --color-success-border-strong: #22c55e; /* green-500 — success icon border */ --color-success: #16a34a; /* green-600 */ --color-success-strong: #166534; /* green-800 */ /* ---------------------------------------------------------- Spacing scale (base-4, in rem) ---------------------------------------------------------- */ --space-1: 0.25rem; /* 4px */ --space-1-5: 0.375rem; /* 6px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-12: 3rem; /* 48px */ /* ---------------------------------------------------------- Border radius ---------------------------------------------------------- */ --radius-sm: 0.375rem; /* inputs, badges, small elements */ --radius-md: 0.5rem; /* buttons */ --radius-lg: 0.75rem; /* cards, modals */ --radius-2xl: 1rem; /* rounded-2xl — highlight boxes */ --radius-3xl: 1.5rem; /* rounded-3xl — fispq form section cards */ --radius-full: 9999px; /* pills */ /* ---------------------------------------------------------- Shadows ---------------------------------------------------------- */ --shadow-sm: 0 1px 3px rgba(42, 52, 57, 0.04), 0 1px 2px rgba(42, 52, 57, 0.04); --shadow-md: 0 4px 16px rgba(42, 52, 57, 0.06); --shadow-lg: 0 8px 32px rgba(42, 52, 57, 0.06); --shadow-ambient: 0 2px 8px rgba(42, 52, 57, 0.04), 0 1px 2px rgba(42, 52, 57, 0.04); --shadow-floating: 0 16px 64px rgba(42, 52, 57, 0.04), 0 8px 32px rgba(42, 52, 57, 0.04); --shadow-inner: inset 0 2px 4px rgba(42, 52, 57, 0.05); --shadow-focus: 0 0 0 2px var(--color-white), 0 0 0 4px var(--color-focus-ring); /* ---------------------------------------------------------- Typography ---------------------------------------------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-4xl: 2.25rem; /* 36px */ --text-5xl: 3rem; /* 48px */ --leading-sm: 1.25rem; --leading-base: 1.5rem; --leading-xl: 1.75rem; --leading-relaxed: 1.625; --tracking-tight: -0.025em; --tracking-headline: -0.02em; /* editorial punch for headlines */ --tracking-wide: 0.025em; /* ---------------------------------------------------------- Colors — Warning (amber) — GHS classification highlight ---------------------------------------------------------- */ --color-warning-bg: #e8e7f2; /* tertiary-container — no jarring yellow */ --color-warning-border: rgba(93, 92, 120, 0.15); /* tertiary ghost border */ --color-warning-label: #3e3d54; /* on-tertiary-container */ --color-warning-value: #3e3d54; /* on-tertiary-container */ /* ---------------------------------------------------------- Colors — Info (slate-blue) — document date highlight ---------------------------------------------------------- */ --color-info-bg: #f0f5f8; /* surface */ --color-info-border: #e8eff3; /* surface-container */ --color-info-label: #2a3439; /* on-surface */ --color-info-value: #2a3439; /* on-surface */ /* ---------------------------------------------------------- Alpha border / Ghost border (outline-variant at 15%) ---------------------------------------------------------- */ --color-border-alpha: rgba(176, 196, 204, 0.15); /* ---------------------------------------------------------- Surface hierarchy — tonal layering system ---------------------------------------------------------- */ --color-surface: #f0f5f8; --color-surface-container-lowest: #ffffff; --color-surface-container-low: #edf3f6; --color-surface-container: #e8eff3; --color-surface-container-high: #d8e5ec; --color-surface-container-highest: #c8d8e2; /* ---------------------------------------------------------- Semantic roles (Material-style) ---------------------------------------------------------- */ --color-on-surface: #2a3439; --color-on-surface-variant: #4a5c63; --color-outline-variant: #b0c4cc; --color-border-ghost: rgba(176, 196, 204, 0.15); /* ---------------------------------------------------------- Primary expanded ---------------------------------------------------------- */ --color-primary-dim: #3a537c; --color-primary-container: #dce4f5; --color-on-primary: #ffffff; /* Signature gradient for primary CTAs and status headers */ --gradient-primary: linear-gradient(135deg, #465f88, #3a537c); --gradient-danger: linear-gradient(135deg, #ef4444, #dc2626); /* ---------------------------------------------------------- Tertiary — sophisticated caution (replaces warning yellow) ---------------------------------------------------------- */ --color-tertiary: #5d5c78; --color-tertiary-container: #e8e7f2; --color-on-tertiary-container: #3e3d54; /* ---------------------------------------------------------- Error container — hazard chips ---------------------------------------------------------- */ --color-error-container: #fce8e8; --color-on-error-container: #7c1c1c; /* ---------------------------------------------------------- Typography stacks ---------------------------------------------------------- */ --font-display: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================================ Global reset / base styles ============================================================ */ *, *::before, *::after { box-sizing: border-box; letter-spacing: -0.01em; } body { font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--color-on-surface); background-color: var(--color-bg-subtle); min-height: 100vh; line-height: 1.6; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); letter-spacing: var(--tracking-headline); color: var(--color-on-surface); } /* ============================================================ Visibility utility (used by Stimulus controllers) ============================================================ */ .hidden { display: none !important; }