/** * Motorwise Static Articles - Shared Styles * * This stylesheet provides consistent styling for all static article pages. * Import this file in your article 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 */ /* ============================================================================ Base Styles ============================================================================ */ body { font-family: 'Jost', sans-serif; } /* ============================================================================ Article Prose Styling ============================================================================ */ .article-prose { color: #525252; /* text-neutral-600 */ line-height: 1.75; } .article-prose p { margin-bottom: 1.25rem; } .article-prose p:last-child { margin-bottom: 0; } .article-prose strong { color: #171717; /* text-neutral-900 */ font-weight: 600; } .article-prose a { color: #2563eb; /* text-blue-600 */ text-decoration: underline; text-underline-offset: 2px; } .article-prose a:hover { color: #1d4ed8; /* text-blue-700 */ } /* Lists */ .article-prose ul, .article-prose ol { margin-bottom: 1.25rem; padding-left: 1.5rem; } .article-prose ul { list-style-type: disc; } .article-prose ol { list-style-type: decimal; } .article-prose li { margin-bottom: 0.5rem; color: #525252; } .article-prose li:last-child { margin-bottom: 0; } .article-prose li strong { color: #171717; } /* ============================================================================ Section Cards ============================================================================ */ .article-section { background-color: white; border-radius: 1rem; border: 1px solid rgba(245, 245, 245, 0.8); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); padding: 1.5rem; margin-bottom: 1.5rem; } @media (min-width: 640px) { .article-section { padding: 2rem; } } .article-section-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; } .article-section-icon { width: 2.5rem; height: 2.5rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); } .article-section-icon i { font-size: 1.25rem; color: #2563eb; } .article-section-title { font-size: 1.25rem; font-weight: 600; color: #171717; } @media (min-width: 640px) { .article-section-title { font-size: 1.5rem; } } /* ============================================================================ Callout Boxes ============================================================================ */ .callout { border-radius: 0.75rem; padding: 1.25rem; margin: 1.5rem 0; display: flex; align-items: flex-start; gap: 0.75rem; } .callout-icon { flex-shrink: 0; font-size: 1.25rem; margin-top: 0.125rem; } .callout-content { flex: 1; } .callout-title { font-weight: 600; margin-bottom: 0.25rem; } .callout-text { font-size: 0.875rem; } /* Tip variant */ .callout.tip { background-color: #ecfdf5; border: 1px solid #a7f3d0; } .callout.tip .callout-icon { color: #059669; } .callout.tip .callout-title { color: #065f46; } .callout.tip .callout-text { color: #047857; } /* Warning variant */ .callout.warning { background-color: #fffbeb; border: 1px solid #fde68a; } .callout.warning .callout-icon { color: #d97706; } .callout.warning .callout-title { color: #92400e; } .callout.warning .callout-text { color: #b45309; } /* Info variant */ .callout.info { background-color: #eff6ff; border: 1px solid #bfdbfe; } .callout.info .callout-icon { color: #2563eb; } .callout.info .callout-title { color: #1e40af; } .callout.info .callout-text { color: #1d4ed8; } /* Error/Danger variant */ .callout.danger { background-color: #fef2f2; border: 1px solid #fecaca; } .callout.danger .callout-icon { color: #dc2626; } .callout.danger .callout-title { color: #991b1b; } .callout.danger .callout-text { color: #b91c1c; } /* ============================================================================ Template/Code Boxes ============================================================================ */ .template-box { background-color: #f8fafc; border: 1px solid #e2e8f0; border-radius: 0.75rem; overflow: hidden; margin: 1.5rem 0; } .template-header { display: flex; align-items: center; justify-content: space-between; padding: 0.75rem 1rem; background-color: #f1f5f9; border-bottom: 1px solid #e2e8f0; } .template-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; color: #334155; } .template-title i { color: #2563eb; } .template-copy-btn { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 500; color: #525252; background-color: white; border: 1px solid #d4d4d4; border-radius: 0.5rem; cursor: pointer; transition: all 0.2s ease; } .template-copy-btn:hover { border-color: #2563eb; color: #2563eb; } .template-copy-btn.copied { background-color: #ecfdf5; border-color: #a7f3d0; color: #059669; } .template-content { padding: 1rem; font-size: 0.875rem; color: #334155; white-space: pre-wrap; line-height: 1.6; max-height: 20rem; overflow-y: auto; } /* ============================================================================ FAQ Accordion ============================================================================ */ .faq-item { background-color: white; border: 1px solid rgba(229, 229, 229, 0.8); border-radius: 0.75rem; overflow: hidden; margin-bottom: 0.75rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem; font-size: 0.9375rem; font-weight: 500; color: #171717; background: none; border: none; cursor: pointer; text-align: left; transition: background-color 0.15s ease; } .faq-question:hover { background-color: #fafafa; } .faq-question i { color: #a3a3a3; transition: transform 0.2s ease; flex-shrink: 0; } .faq-item.open .faq-question i { transform: rotate(180deg); } .faq-answer { display: none; padding: 0 1.25rem 1.25rem 1.25rem; font-size: 0.875rem; color: #525252; line-height: 1.6; } .faq-item.open .faq-answer { display: block; } /* ============================================================================ Tables ============================================================================ */ .article-table-wrapper { overflow-x: auto; margin: 1.5rem 0; border-radius: 0.75rem; border: 1px solid rgba(229, 229, 229, 0.8); } .article-table { width: 100%; font-size: 0.875rem; border-collapse: collapse; } .article-table thead { background-color: #f8fafc; } .article-table th { padding: 0.75rem 1rem; text-align: left; font-weight: 600; color: #171717; border-bottom: 1px solid #e5e5e5; } .article-table td { padding: 0.75rem 1rem; color: #525252; border-bottom: 1px solid #f5f5f5; } .article-table tbody tr:last-child td { border-bottom: none; } .article-table tbody tr:hover { background-color: #fafafa; } /* ============================================================================ Blockquote ============================================================================ */ .article-blockquote { position: relative; padding: 1.5rem; padding-left: 1.5rem; margin: 1.5rem 0; background-color: #f8fafc; border-left: 4px solid #2563eb; border-radius: 0 0.75rem 0.75rem 0; font-style: italic; color: #334155; } .article-blockquote cite { display: block; margin-top: 0.75rem; font-size: 0.875rem; font-style: normal; color: #64748b; } /* ============================================================================ Related Articles ============================================================================ */ .related-article-card { display: flex; align-items: flex-start; gap: 1rem; padding: 1.25rem; background-color: white; border: 1px solid rgba(229, 229, 229, 0.8); border-radius: 0.75rem; text-decoration: none; transition: all 0.2s ease; } .related-article-card:hover { border-color: #bfdbfe; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); transform: translateY(-2px); } .related-article-icon { width: 3rem; height: 3rem; border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); transition: background 0.2s ease; } .related-article-card:hover .related-article-icon { background: linear-gradient(to bottom right, #dbeafe, rgba(191, 219, 254, 0.5)); } .related-article-icon i { font-size: 1.25rem; color: #2563eb; } .related-article-title { font-weight: 600; color: #171717; margin-bottom: 0.25rem; transition: color 0.2s ease; } .related-article-card:hover .related-article-title { color: #2563eb; } .related-article-desc { font-size: 0.875rem; color: #737373; } /* ============================================================================ Article Header ============================================================================ */ .article-category-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.75rem; font-size: 0.75rem; font-weight: 600; color: #2563eb; background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); border: 1px solid rgba(191, 219, 254, 0.5); border-radius: 9999px; } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: 0.875rem; color: #737373; } .article-meta-item { display: flex; align-items: center; gap: 0.375rem; } /* ============================================================================ Savings Callout ============================================================================ */ .savings-callout { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background-color: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 0.75rem; margin-bottom: 2rem; } .savings-icon { width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background-color: #d1fae5; } .savings-icon i { font-size: 1.25rem; color: #059669; } .savings-amount { font-size: 0.9375rem; font-weight: 600; color: #059669; } .savings-text { font-size: 0.75rem; color: #059669; } /* ============================================================================ Bottom CTA ============================================================================ */ .article-cta { padding: 2rem; background: linear-gradient(to bottom right, #eff6ff, #eff6ff, rgba(219, 234, 254, 0.8)); border: 1px solid rgba(191, 219, 254, 0.5); border-radius: 1rem; text-align: center; margin-top: 3rem; } .article-cta-icon { width: 3rem; height: 3rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; background: linear-gradient(to bottom right, #dbeafe, rgba(191, 219, 254, 0.5)); } .article-cta-icon i { font-size: 1.25rem; color: #2563eb; } .article-cta-title { font-size: 1.125rem; font-weight: 600; color: #171717; margin-bottom: 0.5rem; } .article-cta-text { font-size: 0.875rem; color: #525252; margin-bottom: 1rem; max-width: 28rem; margin-left: auto; margin-right: auto; } .article-cta-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-weight: 600; color: white; background-color: #2563eb; border-radius: 0.75rem; text-decoration: none; transition: all 0.2s ease; box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.2); } .article-cta-btn:hover { background-color: #1d4ed8; transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.3); } /* ============================================================================ Responsive Utilities ============================================================================ */ @media (max-width: 639px) { .article-section { padding: 1.25rem; } .callout { flex-direction: column; gap: 0.5rem; } .callout-icon { margin-top: 0; } }