/** * 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; /* Easing Curves */ --ease-accordion: cubic-bezier(0.32, 0.72, 0, 1); --ease-micro: cubic-bezier(0.2, 0, 0, 1); /* 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-500 */ 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 - Aligned with tools.css .mw-card pattern ============================================================================ */ .article-section { background-color: white; border-radius: 1rem; /* rounded-2xl - matches mw-card */ border: 1px solid rgba(245, 245, 245, 0.8); /* border-neutral-100/80 */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */ padding: 1.5rem; margin-bottom: 1.5rem; transition: all 0.3s ease-out; } .article-section:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */ } /* ============================================================================ Enhanced Card Styling - Aligned with Home Page VehicleIntelligence.jsx ============================================================================ */ /* Base enhanced card - matches home page pattern */ .mw-card-enhanced { position: relative; background-color: white; border-radius: 1rem; /* rounded-2xl */ border: 1px solid rgba(245, 245, 245, 0.8); /* border-neutral-100/80 */ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */ transition: all 0.3s ease-out; cursor: pointer; } .mw-card-enhanced:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */ } /* Back card depth layer - creates layered card effect */ .mw-card-depth { position: absolute; left: 0.5rem; top: 0.5rem; width: calc(100% - 1rem); height: 100%; background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.4)); border-radius: 1rem; transform: rotate(2deg); z-index: -1; pointer-events: none; } /* Blur accent beneath cards */ .mw-card-blur-accent { position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); width: 75%; height: 1.5rem; background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.3)); border-radius: 9999px; filter: blur(24px); opacity: 0.3; z-index: -1; pointer-events: none; } /* Card wrapper for depth effect positioning */ .mw-card-wrapper { position: relative; z-index: 1; } @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.75rem; height: 2.75rem; border-radius: 0.75rem; /* rounded-xl - matches mw-icon-box */ display: flex; align-items: center; justify-content: center; flex-shrink: 0; 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); transition: transform 0.2s ease; } .article-section:hover .article-section-icon { transform: scale(1.05); } .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 - Aligned with tools.css .mw-info-card pattern ============================================================================ */ .callout { border-radius: 0.75rem; /* rounded-xl */ padding: 1.25rem; /* p-5 - matches mw-info-card */ margin: 1.5rem 0; display: flex; align-items: flex-start; gap: 0.75rem; transition: all 0.3s ease; } .callout:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05); } .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; line-height: 1.5; } /* Tip variant - matches mw-info-card--emerald */ .callout.tip { background-color: #ecfdf5; border: 1px solid rgba(209, 250, 229, 0.8); /* border-emerald-100/80 */ } .callout.tip .callout-icon { color: #059669; } .callout.tip .callout-title { color: #065f46; } .callout.tip .callout-text { color: #047857; } /* Warning variant - matches mw-info-card--amber */ .callout.warning { background-color: #fffbeb; border: 1px solid rgba(254, 243, 199, 0.8); /* border-amber-100/80 */ } .callout.warning .callout-icon { color: #d97706; } .callout.warning .callout-title { color: #92400e; } .callout.warning .callout-text { color: #b45309; } /* Info variant - matches mw-info-card--blue */ .callout.info { background-color: #eff6ff; border: 1px solid rgba(219, 234, 254, 0.8); /* border-blue-100/80 */ } .callout.info .callout-icon { color: #2563eb; } .callout.info .callout-title { color: #1e40af; } .callout.info .callout-text { color: #1d4ed8; } /* Error/Danger variant - matches mw-info-card--red */ .callout.danger { background-color: #fef2f2; border: 1px solid rgba(254, 226, 226, 0.8); /* border-red-100/80 */ } .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; } /* ============================================================================ Data Badges - Pass Rate Tier Indicators ============================================================================ */ .data-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 500; } .pass-rate-excellent { color: #059669; background: #d1fae5; } .pass-rate-good { color: #16a34a; background: #dcfce7; } .pass-rate-average { color: #ca8a04; background: #fef9c3; } .pass-rate-poor { color: #dc2626; background: #fee2e2; } /* ============================================================================ 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); transition: box-shadow var(--timing-expand-collapse) var(--ease-micro), border-color var(--timing-expand-collapse) var(--ease-micro); } .faq-item.open { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); border-color: rgba(212, 212, 212, 0.9); } .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 var(--timing-hover) var(--ease-micro), color var(--timing-hover) var(--ease-micro); -webkit-tap-highlight-color: transparent; } .faq-question:hover { background-color: #fafafa; } .faq-question:active { background-color: #f5f5f5; } .faq-question:focus-visible { outline: 2px solid rgb(37 99 235); outline-offset: -2px; border-radius: 0.75rem; } .faq-question i { color: #a3a3a3; transition: transform var(--timing-expand-collapse) var(--ease-accordion), color var(--timing-expand-collapse) var(--ease-micro); flex-shrink: 0; } .faq-question:hover i { color: #737373; } .faq-item.open .faq-question i { transform: rotate(180deg); color: #525252; } .faq-answer { height: 0; overflow: hidden; opacity: 0; padding: 0 1.25rem; font-size: 0.875rem; color: #525252; line-height: 1.6; transition: height var(--timing-expand-collapse) var(--ease-accordion), opacity var(--timing-expand-collapse) var(--ease-micro); will-change: height; } .faq-item.open .faq-answer { opacity: 1; padding-bottom: 1.25rem; } .faq-answer.height-auto { height: auto !important; overflow: visible; } /* ============================================================================ Tables - Aligned with tools.css .mw-table pattern ============================================================================ */ .article-table-wrapper { background-color: white; overflow-x: auto; margin: 1.5rem 0; border-radius: 0.75rem; border: 1px solid rgba(229, 229, 229, 0.8); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .article-table { width: 100%; font-size: 0.875rem; /* text-sm */ border-collapse: collapse; } .article-table thead { background-color: #fafafa; /* bg-neutral-50 - matches mw-table */ border-bottom: 1px solid rgba(229, 229, 229, 0.8); } .article-table th { padding: 0.75rem 1rem; /* py-3 px-4 */ text-align: left; font-weight: 600; color: #171717; /* text-neutral-900 */ } .article-table td { padding: 0.75rem 1rem; color: #525252; /* text-neutral-600 */ } .article-table tbody tr { transition: background-color 0.15s ease; } .article-table tbody tr + tr { border-top: 1px solid #f5f5f5; /* divide-neutral-100 */ } .article-table tbody tr:hover { background-color: #f9fafb; } /* ============================================================================ 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; } /* ============================================================================ Masonry Grid Cards - Aligned with Home Page ============================================================================ */ /* Masonry card base */ .masonry-card { position: relative; transition: all 0.3s ease-out; cursor: pointer; } .masonry-card:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* Featured grid cards */ #featured-grid [data-featured-card] { position: relative; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */ transition: all 0.3s ease-out; cursor: pointer; } #featured-grid [data-featured-card]:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); /* shadow-2xl */ } /* Reliability grid links */ #reliability-grid > a { cursor: pointer; } /* ============================================================================ 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.3s ease-out; cursor: pointer; } .related-article-card:hover { border-color: #bfdbfe; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* shadow-xl */ transform: translateY(-2px) scale(1.02); } .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 - Aligned with tools.css .mw-cta-section pattern ============================================================================ */ .article-cta { padding: 1.5rem; background: linear-gradient(to bottom right, #eff6ff, #eff6ff, rgba(219, 234, 254, 0.8)); border: 1px solid rgba(219, 234, 254, 0.5); /* matches mw-cta-section */ border-radius: 1rem; text-align: center; margin-top: 3rem; } @media (min-width: 640px) { .article-cta { padding: 2rem; } } .article-cta-icon { width: 3.5rem; height: 3.5rem; 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)); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } .article-cta-icon i { font-size: 1.5rem; color: #2563eb; } .article-cta-title { font-size: 1.25rem; font-weight: 600; color: #171717; margin-bottom: 0.5rem; } .article-cta-text { font-size: 0.875rem; color: #525252; margin-bottom: 1.25rem; max-width: 28rem; margin-left: auto; margin-right: auto; line-height: 1.5; } /* Button - matches mw-btn-primary pattern with scale on hover */ .article-cta-btn { display: inline-flex; align-items: center; gap: 0.625rem; /* gap-2.5 */ padding: 0.875rem 1.5rem; /* py-3.5 px-6 - matches mw-btn-primary */ font-weight: 600; color: white; background-color: #2563eb; border-radius: 0.75rem; /* rounded-xl */ text-decoration: none; transition: all 0.2s ease; box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.2); /* matches mw-btn-primary */ } .article-cta-btn:hover { background-color: #1d4ed8; transform: translateY(-2px) scale(1.02); /* Added scale for home page alignment */ box-shadow: 0 20px 25px -5px rgba(37, 99, 235, 0.3); /* matches mw-btn-primary:hover */ } .article-cta-btn:active { background-color: #1e40af; transform: translateY(0) scale(1); } /* ============================================================================ 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; } } /* ============================================================================ Animations - Aligned with tools.css patterns ============================================================================ */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .article-fade-in { animation: fadeIn 0.3s ease-out forwards; } /* Staggered animation delays - matches tools.css */ .article-delay-1 { animation-delay: 50ms; } .article-delay-2 { animation-delay: 100ms; } .article-delay-3 { animation-delay: 150ms; } .article-delay-4 { animation-delay: 200ms; } .article-delay-5 { animation-delay: 250ms; } /* ============================================================================ Scroll-Reveal Animations ============================================================================ */ .scroll-reveal { opacity: 0; transform: translateY(8px); /* matches fadeIn animation */ transition: opacity 400ms ease-out, transform 400ms 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: 50ms; } .scroll-reveal[data-reveal-index="3"] { transition-delay: 100ms; } .scroll-reveal[data-reveal-index="4"] { transition-delay: 150ms; } .scroll-reveal[data-reveal-index="5"] { transition-delay: 200ms; } .scroll-reveal[data-reveal-index="6"] { transition-delay: 250ms; } .scroll-reveal[data-reveal-index="7"] { transition-delay: 300ms; } .scroll-reveal[data-reveal-index="8"] { transition-delay: 350ms; } .scroll-reveal[data-reveal-index="9"] { transition-delay: 400ms; } .scroll-reveal[data-reveal-index="10"] { transition-delay: 450ms; } /* 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; } .faq-item { transition: none; } .faq-answer { transition: none; } .faq-question i { 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; } /* ============================================================================ Shared Utilities - Aligned with tools.css patterns ============================================================================ */ /* Card lift effect - matches mw-card-lift */ .article-card-lift { transition: all 0.3s ease-out; } .article-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); } /* Focus ring - matches mw-focus-ring */ .article-focus-ring:focus { outline: none; box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); } /* Card label - small uppercase text - matches mw-label */ .article-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } /* List styling - matches mw-list */ .article-list { list-style: none; padding: 0; margin: 0; } .article-list li { display: flex; align-items: flex-start; gap: 0.625rem; /* gap-2.5 */ } .article-list li + li { margin-top: 0.625rem; /* space-y-2.5 */ } /* Warning banner - matches mw-warning-banner */ .article-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 - matches mw-success-banner */ .article-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; } /* Info banner */ .article-info-banner { display: flex; align-items: center; gap: 0.5rem; background-color: #eff6ff; border: 1px solid rgba(219, 234, 254, 0.8); border-radius: 0.75rem; padding: 0.75rem 1rem; } /* ============================================================================ Form Input Styling - Aligned with Home Page Hero Input ============================================================================ */ #guides-search { border-color: transparent; transition: all 0.2s ease; } #guides-search:focus { border-color: #3b82f6; /* blue-500 */ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); outline: none; } /* ============================================================================ Responsive Utilities ============================================================================ */ /* Mobile: Reduce shadow intensity for performance */ @media (max-width: 639px) { .article-section { padding: 1.25rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md on mobile */ } .article-section:hover { transform: translateY(-2px); /* No scale on mobile for performance */ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } .masonry-card:hover { transform: translateY(-1px); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .mw-card-enhanced { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); } .mw-card-enhanced:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* Hide depth layers and blur accents on mobile for cleaner look and performance */ .mw-card-depth, .mw-card-blur-accent, .mw-card-wrapper > [class*="blur-2xl"] { display: none; } .callout { flex-direction: column; gap: 0.5rem; } .callout-icon { margin-top: 0; } /* FAQ accordion: tighter padding + stronger tap feedback on mobile */ .faq-question { padding: 1rem; } .faq-question:active { background-color: #f0f0f0; } .faq-item.open .faq-answer { padding-bottom: 1rem; } } /* ============================================================================ Articles Page Specific Styles (from index.html) ============================================================================ */ /* Card animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Sidebar mobile collapse */ #sidebar-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } #sidebar-content.expanded { max-height: 800px; } @media (min-width: 1024px) { #sidebar-content { max-height: none; overflow: visible; } } /* Sticky sidebar on desktop */ @media (min-width: 1024px) { [data-component="articles-sidebar"] { position: sticky; top: 6rem; align-self: start; } } /* Category pill active states - gradient background matching home page */ [data-category].active { background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); border-color: rgba(191, 219, 254, 0.5); color: rgb(37 99 235); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } /* Sidebar category button active states - gradient background matching home page */ [data-sidebar-category].active { background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); border-color: rgba(191, 219, 254, 0.5); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); } [data-sidebar-category].active i { color: rgb(37 99 235); } /* ======================================================================== EDITORIAL MASTHEAD HERO STYLES ======================================================================== */ /* Editorial section label */ .editorial-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: #a3a3a3; margin-bottom: 0.75rem; } /* Stats bar - matches VehicleAnalysisReport */ .stats-bar { /* Tailwind handles most styling; this ensures smooth transitions */ transition: box-shadow 0.2s ease; } @media (max-width: 640px) { .stats-bar { flex-direction: column; gap: 0.75rem; text-align: center; } .stats-bar .pl-4 { padding-left: 0; border-left: none; border-top: 1px solid #e5e5e5; padding-top: 0.75rem; } .stats-bar [data-el] { font-size: 1.25rem; } } /* Fade-in-up animation */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .fade-in-up { opacity: 0; transform: translateY(16px); } .fade-in-up.is-visible { animation: fadeInUp 0.5s ease-out forwards; } /* Category Cards - Compact pills for All Guides section */ .category-card { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.625rem; background: white; border-radius: 0.5rem; border: 1px solid #e5e5e5; text-align: left; cursor: pointer; transition: all 0.2s ease; } .category-card:hover { border-color: #93c5fd; box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1); transform: translateY(-1px); } .category-card.active { background: linear-gradient(to bottom right, #eff6ff, rgba(219, 234, 254, 0.5)); border-color: rgba(191, 219, 254, 0.5); } .category-icon { width: 1.25rem; height: 1.25rem; border-radius: 0.25rem; background: linear-gradient(to bottom right, #eff6ff, #dbeafe); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 0.625rem; color: #2563eb; } .category-card.active .category-icon { background: white; } .category-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .category-name { font-size: 0.6875rem; font-weight: 500; color: #171717; line-height: 1.2; white-space: nowrap; } .category-count { font-size: 0.5625rem; color: #737373; } .category-chevron { font-size: 0.75rem; color: #d4d4d4; flex-shrink: 0; transition: color 0.2s ease; } .category-card:hover .category-chevron { color: #93c5fd; } /* Focus-visible states for keyboard navigation */ [data-category]:focus-visible, [data-sidebar-category]:focus-visible, [data-jump]:focus-visible { outline: 2px solid rgb(37 99 235); outline-offset: 2px; } button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid rgb(37 99 235); outline-offset: 2px; } /* Reading progress bar */ #reading-progress { transform-origin: left; } /* ======================================== Masonry Grid with Absolute Positioning ======================================== */ #reliability-grid { position: relative; width: 100%; } #reliability-grid > a { position: absolute; transition: transform 0.3s ease, opacity 0.3s ease, box-shadow 0.2s ease; content-visibility: auto; contain-intrinsic-size: auto 300px; } #reliability-grid > a:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* Featured cards hover */ #featured-grid [data-featured-card] { transition: transform 0.2s ease, box-shadow 0.2s ease; } #featured-grid [data-featured-card]:hover { transform: translateY(-2px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); } /* Loading state - hide cards until positioned */ #reliability-grid.masonry-loading > a { opacity: 0; } #reliability-grid.masonry-ready > a { opacity: 1; } /* ======================================== Single-Column Mode (Mobile) CSS-based stacking, no JS positioning ======================================== */ #reliability-grid.masonry-single-col { display: flex; flex-direction: column; gap: 16px; height: auto !important; /* Override JS-set height */ } #reliability-grid.masonry-single-col > a { position: static !important; /* Override absolute positioning */ width: 100% !important; left: auto !important; top: auto !important; opacity: 1; } /* Cards visible immediately in single-col mode */ #reliability-grid.masonry-single-col.masonry-loading > a { opacity: 1; } /* ======================================== Mobile Bottom Navigation ======================================== */ .articles-bottom-nav { position: fixed; bottom: 0; left: 0; right: 0; height: 64px; background: white; border-top: 1px solid rgba(245, 245, 245, 0.8); box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05); z-index: 50; } /* Hide on desktop */ @media (min-width: 1024px) { .articles-bottom-nav { display: none; } } .articles-bottom-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #a3a3a3; transition: all 0.2s ease; cursor: pointer; -webkit-tap-highlight-color: transparent; } .articles-bottom-nav-item.active { color: #2563eb; } .articles-bottom-nav-item.active .nav-icon-bg { background-color: #eff6ff; } .nav-icon-bg { width: 48px; height: 28px; border-radius: 14px; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .articles-bottom-nav-item i { font-size: 20px; } .articles-bottom-nav-item span { font-size: 11px; font-weight: 500; } /* Mobile tab content */ .mobile-tab-content { display: none; } .mobile-tab-content.active { display: block; animation: mobileTabFadeIn 0.25s ease-out; } @keyframes mobileTabFadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* Mobile layout adjustments */ @media (max-width: 1023px) { /* Add padding for bottom nav */ body { padding-bottom: 64px; } /* Hide footer on mobile */ #mw-footer { display: none; } /* Hide desktop sidebar on mobile */ [data-component="articles-sidebar"] { display: none; } } /* More tab category cards */ .more-category-card { display: flex; align-items: center; gap: 12px; padding: 16px; background: white; border-radius: 12px; border: 1px solid rgba(245, 245, 245, 0.8); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04); transition: all 0.2s ease; cursor: pointer; width: 100%; text-align: left; } .more-category-card:hover { border-color: rgba(229, 229, 229, 0.8); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); } .more-category-card:active { transform: scale(0.98); } .more-category-card .card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid rgba(219, 234, 254, 0.5); } .more-category-card .card-content { flex: 1; min-width: 0; } .more-category-card .card-title { font-size: 15px; font-weight: 600; color: #171717; margin-bottom: 2px; } .more-category-card .card-count { font-size: 12px; color: #737373; } .more-category-card .card-arrow { color: #d4d4d4; font-size: 18px; } /* Featured styles moved to /articles/styles/featured-cards.css */ /* ============================================================================ Articles Hero - Chevron Background Design Aligned with Hero.jsx from main home page ============================================================================ */ /* Hero Section Container */ [data-component="articles-hero"] { position: relative; overflow: visible; min-height: auto; } @media (min-width: 1024px) { [data-component="articles-hero"] { min-height: max(78vh, 620px); } } /* Chevron Background Elements */ .articles-hero-chevron { transition: opacity 0.5s ease-out; opacity: 0; } [data-component="articles-hero"].is-visible .articles-hero-chevron { opacity: 1; } /* Staggered chevron fade-in */ .articles-hero-chevron:nth-child(1) { transition-delay: 0ms; } .articles-hero-chevron:nth-child(2) { transition-delay: 100ms; } .articles-hero-chevron:nth-child(3) { transition-delay: 200ms; } /* Blur Accent Decorations */ .articles-hero-blur-accent { transition: opacity 1000ms ease-out; pointer-events: none; } /* Bar Chart Animation */ .articles-hero-bar { transform-origin: left center; } /* Hero Section Responsive Adjustments */ @media (max-width: 1023px) { [data-component="articles-hero"] { padding-top: 2rem; padding-bottom: 2rem; } } /* Mobile Chevron Background */ @media (max-width: 767px) { [data-component="articles-hero"] { min-height: auto; padding-top: 1.5rem; padding-bottom: 1.5rem; } } /* Grid Pattern Overlay (optional - can add to hero if needed) */ .articles-hero-grid-pattern { background-image: radial-gradient(circle, rgba(0, 0, 0, 0.015) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; } /* Ensure z-index layering */ [data-component="articles-hero"] > svg { z-index: -20; } [data-component="articles-hero"] > .articles-hero-blur-accent { z-index: -5; } [data-component="articles-hero"] > div:last-child { z-index: 1; } /* ============================================================================ Articles Hero Layout Fixes - Two Column Grid ============================================================================ */ /* Hero Grid Layout - Ensure proper column separation */ [data-component="articles-hero"] .lg\:grid-cols-\[55\%_45\%\], [data-component="articles-hero"] .xl\:grid-cols-\[52\%_48\%\] { /* Ensure both columns respect their boundaries */ contain: layout; } /* Category Cards Grid - Consistent sizing */ [data-component="articles-hero"] #category-cards { width: 100%; max-width: 100%; /* All rows same height */ grid-auto-rows: 1fr; } /* lg breakpoint (1024-1279px): 3 columns, equal sizing */ @media (min-width: 1024px) and (max-width: 1279px) { [data-component="articles-hero"] #category-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* xl breakpoint (1280px+): 4 columns, equal sizing */ @media (min-width: 1280px) { [data-component="articles-hero"] #category-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* Compact category cards for hero section */ [data-component="articles-hero"] .category-card { /* More compact padding */ padding: 0.625rem 0.75rem; min-height: 0; } [data-component="articles-hero"] .category-icon { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; border-radius: 0.5rem; } [data-component="articles-hero"] .category-name { font-size: 0.8125rem; } [data-component="articles-hero"] .category-count { font-size: 0.6875rem; } [data-component="articles-hero"] .category-chevron { font-size: 1rem; } /* lg breakpoint (1024px-1279px) - 3 columns, compact */ @media (min-width: 1024px) and (max-width: 1279px) { [data-component="articles-hero"] #category-cards { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; } /* Even more compact on lg screens */ [data-component="articles-hero"] .category-card { padding: 0.5rem 0.625rem; } [data-component="articles-hero"] .category-icon { width: 1.5rem; height: 1.5rem; font-size: 0.75rem; } } /* xl breakpoint (1280px+) - 4 columns, standard gap */ @media (min-width: 1280px) { [data-component="articles-hero"] #category-cards { grid-template-columns: repeat(4, 1fr); gap: 0.5rem; } [data-component="articles-hero"] .category-card { padding: 0.625rem 0.75rem; } } /* Ensure proper grid alignment */ @media (min-width: 1024px) { [data-component="articles-hero"] .lg\:items-start { align-items: start; } } /* Prevent text overflow in category cards */ [data-component="articles-hero"] .category-info { overflow: hidden; min-width: 0; } [data-component="articles-hero"] .category-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ============================================================================ FAQ Hero - Chevron Background Design Matching Articles Hero pattern for consistent visual language ============================================================================ */ /* FAQ Hero Section Container */ [data-component="faq-hero"] { position: relative; overflow: visible; min-height: auto; } @media (min-width: 1024px) { [data-component="faq-hero"] { min-height: max(70vh, 540px); } } /* Chevron Background Elements */ .faq-hero-chevron { transition: opacity 0.5s ease-out; opacity: 0; } [data-component="faq-hero"].is-visible .faq-hero-chevron { opacity: 1; } /* Staggered chevron fade-in */ .faq-hero-chevron:nth-child(1) { transition-delay: 0ms; } .faq-hero-chevron:nth-child(2) { transition-delay: 100ms; } .faq-hero-chevron:nth-child(3) { transition-delay: 200ms; } /* Blur Accent Decorations */ .faq-hero-blur-accent { transition: opacity 1000ms ease-out; pointer-events: none; } /* Card Stack Container */ .faq-hero-card-stack { perspective: 1000px; } /* Illustration Cards - layered stack layout */ .faq-hero-illustration-card { transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease-out; will-change: transform; } /* Card hover effects */ .faq-hero-card-stack:hover .faq-hero-illustration-card:nth-child(1) { transform: rotate(0deg) translateY(-4px); box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.12); } .faq-hero-card-stack:hover .faq-hero-illustration-card:nth-child(2) { transform: rotate(3deg) translateY(-14px) scale(1.05); box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.18); } .faq-hero-card-stack:hover .faq-hero-illustration-card:nth-child(3) { transform: rotate(-3deg) translateY(-12px) scale(1.06); box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.18); } .faq-hero-card-stack:hover .faq-hero-illustration-card:nth-child(4) { transform: rotate(4deg) translateY(-14px) scale(1.07); box-shadow: 0 20px 40px -8px rgba(0, 0, 0, 0.2); } .faq-hero-card-stack:hover .faq-hero-illustration-card:nth-child(5) { transform: rotate(-2deg) translateY(-16px) scale(1.08); box-shadow: 0 20px 40px -8px rgba(15, 23, 42, 0.3); } /* Bar Chart Animation */ .faq-hero-bar { transform-origin: left center; } /* FAQ Hero Responsive Adjustments */ @media (max-width: 1023px) { [data-component="faq-hero"] { padding-top: 2rem; padding-bottom: 2rem; } /* Hide illustration on mobile for cleaner layout */ .faq-hero-card-stack { display: none; } } /* Mobile Chevron Background */ @media (max-width: 767px) { [data-component="faq-hero"] { min-height: auto; padding-top: 1.5rem; padding-bottom: 1.5rem; } } /* FAQ Hero Category Cards - slightly more compact */ [data-component="faq-hero"] #category-cards { width: 100%; max-width: 100%; grid-auto-rows: 1fr; } [data-component="faq-hero"] .category-card { padding: 0.625rem 0.75rem; min-height: 0; } [data-component="faq-hero"] .category-icon { width: 1.75rem; height: 1.75rem; font-size: 0.875rem; border-radius: 0.5rem; } [data-component="faq-hero"] .category-name { font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } [data-component="faq-hero"] .category-count { font-size: 0.6875rem; } [data-component="faq-hero"] .category-chevron { font-size: 1rem; } /* Responsive illustration sizing for FAQ Hero */ @media (min-width: 1024px) and (max-width: 1279px) { [data-component="faq-hero"] .faq-hero-card-stack { min-height: 460px; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(1) { width: 64% !important; height: 250px !important; top: 20px !important; left: 0 !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(2) { width: 175px !important; top: 8px !important; right: 16px !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(3) { width: 165px !important; bottom: 48px !important; left: 16px !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(4) { width: 160px !important; bottom: 40px !important; right: 80px !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(5) { width: 150px !important; top: 120px !important; right: 8px !important; } } @media (min-width: 1280px) { [data-component="faq-hero"] .faq-hero-card-stack { min-height: 420px; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(1) { width: 66% !important; height: 260px !important; top: 24px !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(2) { width: 190px !important; top: 8px !important; right: 16px !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(3) { width: 175px !important; bottom: 48px !important; left: 16px !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(4) { width: 170px !important; bottom: 40px !important; right: 80px !important; } [data-component="faq-hero"] .faq-hero-illustration-card:nth-child(5) { width: 160px !important; top: 130px !important; right: 8px !important; } } /* ============================================================================ Print Styles ============================================================================ */ @media print { /* Hide non-content elements */ #reading-progress, #mw-header, #mw-footer, .article-toc, .article-cta, .article-cta-btn, [data-print-article] { display: none !important; } /* Reset backgrounds for print */ body { background: white !important; } .article-section { box-shadow: none !important; border: 1px solid #e5e5e5 !important; } /* Disable animations */ .scroll-reveal { opacity: 1 !important; transform: none !important; } /* Show all FAQ answers when printing */ .faq-answer { height: auto !important; opacity: 1 !important; overflow: visible !important; padding-bottom: 1.25rem !important; } .faq-item { break-inside: avoid; } /* Ensure tables don't break across pages */ .article-table-wrapper { overflow: visible !important; } table { page-break-inside: avoid; } tr { page-break-inside: avoid; } /* Show link URLs */ .article-main a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: #737373; } /* Ensure callouts are visible without colour */ .callout { border-left: 3px solid #525252 !important; } }