/** * Motorwise Static Tools - Shared Styles * * This stylesheet provides consistent styling for all static tool pages. * Import this file in your tool pages to maintain design consistency. * * Usage in HTML: * * * Required dependencies (include in before this file): * - Tailwind CDN with config * - Jost font from Google Fonts * - Phosphor Icons */ /* ============================================================================ UK Vehicle Registration Mark Font ============================================================================ */ @font-face { font-family: "UK-VRM"; src: url("/fonts/uk-vrm.woff2") format("woff2"); font-display: swap; } /* ============================================================================ Base Styles ============================================================================ */ body { font-family: 'Jost', sans-serif; } /* ============================================================================ Number Plate Styles Used for registration plate inputs and displays ============================================================================ */ .plate-input, .plate-text { font-family: 'UK-VRM', monospace; } .plate-input::placeholder { font-family: 'UK-VRM', monospace; letter-spacing: 0.05em; } /* Plate colors - use as inline styles or with these classes */ .plate-yellow { background-color: #FFC107; color: #212121; } .plate-white { background-color: #FFFFFF; color: #212121; } .plate-gb-stripe { background-color: #1565C0; } /* ============================================================================ Card Components ============================================================================ */ /* Base card - matches app's card pattern */ .mw-card { background-color: white; border-radius: 1rem; /* rounded-2xl */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); border: 1px solid rgba(245, 245, 245, 0.8); /* border-neutral-100/80 */ } /* Card with hover lift effect */ .mw-card-hover { transition: all 0.3s ease; } .mw-card-hover:hover { transform: translateY(-2px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15); } /* Info card variants */ .mw-info-card { border-radius: 0.75rem; /* rounded-xl */ padding: 1.25rem; /* p-5 */ transition: all 0.3s ease; } .mw-info-card:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } .mw-info-card--blue { background-color: #eff6ff; /* bg-gradient-to-br from-blue-50 to-blue-100/50 */ border: 1px solid rgba(219, 234, 254, 0.8); /* border-blue-100/80 */ } .mw-info-card--emerald { background-color: #ecfdf5; /* bg-emerald-50 */ border: 1px solid rgba(209, 250, 229, 0.8); /* border-emerald-100/80 */ } .mw-info-card--amber { background-color: #fffbeb; /* bg-amber-50 */ border: 1px solid rgba(254, 243, 199, 0.8); /* border-amber-100/80 */ } .mw-info-card--red { background-color: #fef2f2; /* bg-red-50 */ border: 1px solid rgba(254, 226, 226, 0.8); /* border-red-100/80 */ } .mw-info-card--neutral { background-color: white; border: 1px solid rgba(229, 229, 229, 0.8); /* border-neutral-200/80 */ } /* Icon containers */ .mw-icon-box { width: 2.5rem; /* w-10 */ height: 2.5rem; /* h-10 */ border-radius: 0.75rem; /* rounded-xl */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .mw-icon-box--sm { width: 2rem; /* w-8 */ height: 2rem; /* h-8 */ border-radius: 0.5rem; /* rounded-lg */ } .mw-icon-box--blue { background-color: #dbeafe; /* bg-gradient-to-br from-blue-50 to-blue-100/50 */ } .mw-icon-box--emerald { background-color: #d1fae5; /* bg-emerald-100 */ } .mw-icon-box--amber { background-color: #fef3c7; /* bg-amber-100 */ } .mw-icon-box--red { background-color: #fee2e2; /* bg-red-100 */ } .mw-icon-box--neutral { background-color: #f5f5f5; /* bg-neutral-100 */ } /* ============================================================================ Interactive Elements ============================================================================ */ /* Focus ring for inputs */ .mw-focus-ring:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } /* Focus within for containers */ .mw-focus-within:focus-within { box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3); } /* Primary button */ .mw-btn-primary { display: inline-flex; align-items: center; gap: 0.625rem; /* gap-2.5 */ background-color: #2563eb; /* bg-gradient-to-br from-blue-50 to-blue-100/50 */ color: white; padding: 0.875rem 1.5rem; /* py-3.5 px-6 */ border-radius: 0.75rem; /* rounded-xl */ font-weight: 600; transition: all 0.2s ease; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2); } .mw-btn-primary:hover { background-color: #1d4ed8; /* bg-gradient-to-br from-blue-50 to-blue-100/50 */ transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.3); } .mw-btn-primary:active { background-color: #1e40af; /* bg-gradient-to-br from-blue-50 to-blue-100/50 */ transform: translateY(0); } /* Secondary button */ .mw-btn-secondary { display: inline-flex; align-items: center; gap: 0.5rem; background-color: white; color: #525252; /* text-neutral-600 */ padding: 0.75rem 1rem; border-radius: 0.75rem; font-weight: 500; border: 1px solid rgba(229, 229, 229, 0.8); transition: all 0.2s ease; } .mw-btn-secondary:hover { background-color: #fafafa; color: #171717; border-color: #d4d4d4; } /* ============================================================================ Table Styles ============================================================================ */ .mw-table-wrapper { background-color: white; border-radius: 0.75rem; border: 1px solid rgba(229, 229, 229, 0.8); overflow: hidden; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .mw-table { width: 100%; font-size: 0.875rem; /* text-sm */ } .mw-table thead { background-color: #fafafa; /* bg-neutral-50 */ border-bottom: 1px solid rgba(229, 229, 229, 0.8); } .mw-table th { padding: 0.75rem 1rem; /* py-3 px-4 */ text-align: left; font-weight: 600; color: #171717; /* text-neutral-900 */ } .mw-table td { padding: 0.75rem 1rem; color: #525252; /* text-neutral-600 */ } .mw-table tbody tr { transition: background-color 0.15s ease; } .mw-table tbody tr:hover { background-color: #f9fafb; } .mw-table tbody tr + tr { border-top: 1px solid #f5f5f5; /* divide-neutral-100 */ } /* ============================================================================ Section Styles ============================================================================ */ /* CTA Section gradient background */ .mw-cta-section { background: linear-gradient(to bottom right, #eff6ff, #eff6ff, rgba(219, 234, 254, 0.8)); border-radius: 1rem; padding: 1.5rem; text-align: center; border: 1px solid rgba(219, 234, 254, 0.5); } @media (min-width: 640px) { .mw-cta-section { padding: 2rem; } } /* ============================================================================ Segment/Chip Hover Effects ============================================================================ */ .mw-segment-hover { transition: all 0.2s ease; } .mw-segment-hover:hover { filter: brightness(1.02); } /* ============================================================================ Typography Helpers These complement Tailwind's utility classes ============================================================================ */ /* Card label - small uppercase text */ .mw-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* ============================================================================ List Styles ============================================================================ */ .mw-list { list-style: none; padding: 0; margin: 0; } .mw-list li { display: flex; align-items: flex-start; gap: 0.625rem; /* gap-2.5 */ } .mw-list li + li { margin-top: 0.625rem; /* space-y-2.5 */ } /* ============================================================================ Error/Alert States ============================================================================ */ .mw-error-icon { width: 3.5rem; /* w-14 */ height: 3.5rem; /* h-14 */ background-color: #fef2f2; /* bg-red-50 */ border: 1px solid #fee2e2; /* border-red-100 */ border-radius: 9999px; /* rounded-full */ display: flex; align-items: center; justify-content: center; } /* ============================================================================ Animation Utilities ============================================================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .mw-fade-in { animation: fadeIn 0.3s ease-out forwards; } /* Staggered animation delays */ .mw-delay-1 { animation-delay: 50ms; } .mw-delay-2 { animation-delay: 100ms; } .mw-delay-3 { animation-delay: 150ms; } .mw-delay-4 { animation-delay: 200ms; } .mw-delay-5 { animation-delay: 250ms; } /* ============================================================================ Hero-style Patterns (aligned with Hero.jsx & NextActionsSection.jsx) ============================================================================ */ /* Gradient icon boxes - matches Hero.jsx pattern */ .mw-icon-box-gradient { display: flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.75rem; /* rounded-xl */ background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .mw-icon-box-gradient--amber { background: linear-gradient(to bottom right, #fffbeb, rgba(254, 243, 199, 0.5)); } .mw-icon-box-gradient--emerald { background: linear-gradient(to bottom right, #ecfdf5, rgba(209, 250, 229, 0.5)); } .mw-icon-box-gradient--purple { background: linear-gradient(to bottom right, #faf5ff, rgba(243, 232, 255, 0.5)); } /* Enhanced button shadows - matches Hero.jsx button pattern */ .mw-btn-shadow-amber { box-shadow: 0 10px 15px -3px rgba(245, 158, 11, 0.2); transition: all 0.2s ease; } .mw-btn-shadow-amber:hover { box-shadow: 0 20px 25px -5px rgba(245, 158, 11, 0.3); } /* Card lift effect - matches NextActionsSection hover */ .mw-card-lift { transition: all 0.3s ease-out; } .mw-card-lift:hover { transform: translateY(-2px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); } /* Action card arrow animation */ .mw-action-arrow { transition: all 0.3s ease; } .group:hover .mw-action-arrow { color: #3b82f6; transform: translateX(4px); } /* Focus ring amber variant */ .mw-focus-ring-amber:focus { outline: none; border-color: #f59e0b; box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.15); } /* Chart/visual container - matches Hero.jsx bg-slate-50 pattern */ .mw-chart-container { background-color: #f8fafc; border-radius: 0.75rem; border: 1px solid rgba(241, 245, 249, 0.5); } /* Warning banner - matches Hero.jsx pattern */ .mw-warning-banner { display: flex; align-items: center; gap: 0.5rem; background-color: #fffbeb; border: 1px solid #fde68a; border-radius: 0.75rem; padding: 0.75rem 1rem; } /* Success banner */ .mw-success-banner { display: flex; align-items: center; gap: 0.5rem; background-color: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 0.75rem; padding: 0.75rem 1rem; }