/** * 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; } /* ============================================================================ Design Tokens - CSS Custom Properties Matching Legal Pages pattern for consistent theming ============================================================================ */ :root { /* Color Tokens - Blue */ --color-blue-bg: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); --color-blue-text: #2563eb; --color-blue-border: rgba(191, 219, 254, 0.5); /* Color Tokens - Emerald */ --color-emerald-bg: #ecfdf5; --color-emerald-text: #059669; --color-emerald-border: rgba(167, 243, 208, 0.5); /* Color Tokens - Amber */ --color-amber-bg: #fffbeb; --color-amber-text: #d97706; --color-amber-border: rgba(253, 230, 138, 0.5); /* Color Tokens - Red */ --color-red-bg: #fef2f2; --color-red-text: #dc2626; --color-red-border: rgba(254, 202, 202, 0.5); /* Color Tokens - Neutral */ --color-neutral-bg: #f5f5f5; --color-neutral-text: #525252; --color-neutral-border: rgba(212, 212, 212, 0.5); /* Animation Timing */ --timing-section-reveal: 150ms; --timing-expand-collapse: 200ms; --timing-hover: 200ms; /* Layout */ --toc-width: 280px; --header-offset: 80px; --content-gap: 2rem; } /* ============================================================================ 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); } /* ============================================================================ Two-Column Article Layout ============================================================================ */ .article-layout { display: block; } @media (min-width: 1024px) { .article-layout { display: grid; grid-template-columns: var(--toc-width) 1fr; gap: var(--content-gap); } } .article-sidebar { margin-bottom: 1.5rem; } @media (min-width: 1024px) { .article-sidebar { margin-bottom: 0; } } .article-main { min-width: 0; /* Prevent grid blowout */ } /* ============================================================================ Table of Contents ============================================================================ */ .article-toc { background-color: white; border-radius: 0.75rem; border: 1px solid rgba(245, 245, 245, 0.8); box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); overflow: hidden; } /* Desktop: Sticky TOC card within the tall sidebar column */ @media (min-width: 1024px) { .article-toc { position: sticky; top: calc(var(--header-offset) + 1rem); max-height: calc(100vh - var(--header-offset) - 2rem); overflow-y: auto; } } /* Mobile: Collapsible Toggle Button */ .article-toc-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1rem; background: none; border: none; cursor: pointer; transition: background-color var(--timing-hover); } .article-toc-toggle:hover { background-color: #fafafa; } .article-toc-toggle-content { display: flex; align-items: center; gap: 0.5rem; } .article-toc-toggle-icon { color: #2563eb; } .article-toc-toggle-label { font-size: 0.875rem; font-weight: 600; color: #171717; } .article-toc-count { padding: 0.125rem 0.5rem; font-size: 0.625rem; font-weight: 500; background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); color: #2563eb; border-radius: 9999px; } .article-toc-caret { color: #a3a3a3; transition: transform var(--timing-expand-collapse); } .article-toc.expanded .article-toc-caret { transform: rotate(180deg); } /* Hide mobile toggle on desktop */ @media (min-width: 1024px) { .article-toc-toggle { display: none; } } /* TOC Content Container */ .article-toc-content { display: none; padding: 0.75rem; } .article-toc.expanded .article-toc-content { display: block; } @media (min-width: 1024px) { .article-toc-content { display: block; } } /* Desktop TOC Header */ .article-toc-header { display: none; } @media (min-width: 1024px) { .article-toc-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid #f5f5f5; } } .article-toc-header-icon { color: #2563eb; } .article-toc-header-text { font-size: 0.875rem; font-weight: 600; color: #171717; } /* TOC Navigation Links */ .article-toc-list { list-style: none; padding: 0; margin: 0; } .article-toc-item { margin-bottom: 0.25rem; } .article-toc-item:last-child { margin-bottom: 0; } .toc-link { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; text-decoration: none; transition: all var(--timing-hover); color: #525252; } .toc-link:hover { background-color: #fafafa; color: #171717; } .toc-link.active { background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); color: #2563eb; } .toc-link-number { font-size: 0.75rem; font-weight: 500; min-width: 1.5rem; color: #a3a3a3; font-variant-numeric: tabular-nums; } .toc-link.active .toc-link-number { color: #2563eb; } .toc-link-text { font-size: 0.875rem; line-height: 1.4; } /* Print Hint (Desktop only) */ .article-toc-print-hint { display: none; } @media (min-width: 1024px) { .article-toc-print-hint { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #f5f5f5; font-size: 0.75rem; color: #a3a3a3; } } /* ============================================================================ Scroll-Reveal Animations ============================================================================ */ .scroll-reveal { opacity: 0; transform: translateY(1rem); transition: opacity 500ms ease-out, transform 500ms ease-out; } .scroll-reveal.visible { opacity: 1; transform: translateY(0); } /* Staggered animation delays based on section index */ .scroll-reveal[data-reveal-index="1"] { transition-delay: 0ms; } .scroll-reveal[data-reveal-index="2"] { transition-delay: 150ms; } .scroll-reveal[data-reveal-index="3"] { transition-delay: 300ms; } .scroll-reveal[data-reveal-index="4"] { transition-delay: 450ms; } .scroll-reveal[data-reveal-index="5"] { transition-delay: 600ms; } .scroll-reveal[data-reveal-index="6"] { transition-delay: 750ms; } .scroll-reveal[data-reveal-index="7"] { transition-delay: 900ms; } .scroll-reveal[data-reveal-index="8"] { transition-delay: 1050ms; } .scroll-reveal[data-reveal-index="9"] { transition-delay: 1200ms; } .scroll-reveal[data-reveal-index="10"] { transition-delay: 1350ms; } /* Scroll margin for anchor navigation */ .article-section[id] { scroll-margin-top: calc(var(--header-offset) + 1rem); } /* Prefers reduced motion */ @media (prefers-reduced-motion: reduce) { .scroll-reveal { opacity: 1; transform: none; transition: none; } } /* ============================================================================ Enhanced Section Headers ============================================================================ */ .article-section-header-enhanced { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; } @media (min-width: 640px) { .article-section-header-enhanced { gap: 1rem; } } .article-section-number { flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 0.5rem; background-color: #f5f5f5; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; color: #525252; font-variant-numeric: tabular-nums; } @media (min-width: 640px) { .article-section-number { width: 2.25rem; height: 2.25rem; } } .article-section-anchor { flex-shrink: 0; opacity: 0; padding: 0.375rem; border-radius: 0.375rem; color: #a3a3a3; transition: all var(--timing-hover); margin-left: auto; } .article-section:hover .article-section-anchor { opacity: 1; } .article-section-anchor:hover { color: #2563eb; background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); } /* ============================================================================ Section Icon Theming ============================================================================ */ .article-section-icon.theme-blue { background: var(--color-blue-bg); } .article-section-icon.theme-blue i { color: var(--color-blue-text); } .article-section-icon.theme-emerald { background: var(--color-emerald-bg); } .article-section-icon.theme-emerald i { color: var(--color-emerald-text); } .article-section-icon.theme-amber { background: var(--color-amber-bg); } .article-section-icon.theme-amber i { color: var(--color-amber-text); } .article-section-icon.theme-red { background: var(--color-red-bg); } .article-section-icon.theme-red i { color: var(--color-red-text); } .article-section-icon.theme-neutral { background: var(--color-neutral-bg); } .article-section-icon.theme-neutral i { color: var(--color-neutral-text); } /* ============================================================================ Line Clamp Utilities ============================================================================ */ .line-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .line-clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================ Responsive Utilities ============================================================================ */ @media (max-width: 639px) { .article-section { padding: 1.25rem; } .callout { flex-direction: column; gap: 0.5rem; } .callout-icon { margin-top: 0; } }