/*
Theme Name: Custom Auto Theme
Author: System
Version: 1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700&display=swap'); * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Work Sans', sans-serif; background: #f0f7ff; color: #1e293b; } .wp-progress { position: fixed; top: 0; left: 0; height: 4px; background: #2563eb; width: 0%; z-index: 9999; transition: width 0.15s ease; } .wp-header { background: #2563eb; padding: 0.9rem 2rem; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 10px rgba(37,99,235,0.4); } .wp-logo { color: #fff; font-size: 1.5rem; font-weight: 700; text-decoration: none; letter-spacing: -0.5px; } .wp-nav { display: flex; gap: 1.25rem; } .wp-nav a { color: rgba(255,255,255,0.9); text-decoration: none; font-size: 0.9rem; font-weight: 500; } .wp-nav a:hover { color: #fff; text-decoration: underline; } .wp-container { max-width: 1100px; margin: 0 auto; padding: 2rem 1.25rem; } .wp-breadcrumb { font-size: 0.82rem; color: #64748b; margin-bottom: 1.5rem; } .wp-breadcrumb a { color: #2563eb; text-decoration: none; } .wp-layout { display: grid; grid-template-columns: 1fr 290px; gap: 2rem; align-items: start; } .wp-hero-img { width: 100%; height: 380px; object-fit: cover; border-radius: 14px; margin-bottom: 1.5rem; display: block; } .wp-rubric { display: inline-block; background: #dbeafe; color: #1d4ed8; padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; margin-bottom: 0.75rem; } h1.wp-title { font-size: 1.9rem; font-weight: 700; line-height: 1.25; color: #0f172a; margin-bottom: 0.75rem; } .wp-meta { display: flex; gap: 1rem; font-size: 0.83rem; color: #64748b; margin-bottom: 1.25rem; flex-wrap: wrap; } .wp-lead { font-size: 1.05rem; line-height: 1.8; color: #374151; font-weight: 500; margin-bottom: 1.5rem; border-left: 4px solid #2563eb; padding: 0.875rem 1.25rem; background: #eff6ff; border-radius: 0 8px 8px 0; } article h2 { font-size: 1.3rem; font-weight: 700; color: #0f172a; margin: 1.75rem 0 0.6rem; } article h3 { font-size: 1.05rem; font-weight: 600; color: #2563eb; margin: 1.25rem 0 0.4rem; } article p { line-height: 1.85; margin-bottom: 1rem; color: #374151; font-size: 0.97rem; } blockquote { border-left: 4px solid #2563eb; background: #eff6ff; padding: 1rem 1.25rem; margin: 1.5rem 0; border-radius: 0 10px 10px 0; font-style: italic; color: #1d4ed8; line-height: 1.7; } .wp-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 1.25rem 0; } .wp-tag { background: #dbeafe; color: #1e40af; padding: 0.25rem 0.7rem; border-radius: 999px; font-size: 0.77rem; font-weight: 500; } .wp-read-also { background: #eff6ff; border-radius: 12px; padding: 1.25rem; margin: 2rem 0; border: 1px solid #bfdbfe; } .wp-read-also h3 { font-size: 1rem; font-weight: 700; color: #1e293b; margin-bottom: 0.75rem; } .wp-read-also ul { list-style: none; } .wp-read-also li { margin-bottom: 0.5rem; } .wp-read-also li a { color: #2563eb; text-decoration: none; font-size: 0.9rem; } .wp-read-also li a:hover { text-decoration: underline; } .wp-sidebar-widget { background: #fff; border-radius: 12px; padding: 1.25rem; margin-bottom: 1.25rem; border: 1px solid #dbeafe; box-shadow: 0 1px 4px rgba(37,99,235,0.08); } .wp-sidebar-widget h4 { font-size: 0.9rem; font-weight: 700; color: #1e293b; margin-bottom: 0.75rem; padding-bottom: 0.4rem; border-bottom: 2px solid #2563eb; } .wp-sidebar-widget ul { list-style: none; } .wp-sidebar-widget li { margin-bottom: 0.5rem; } .wp-sidebar-widget li a { color: #2563eb; text-decoration: none; font-size: 0.87rem; } .wp-sidebar-widget li a:hover { text-decoration: underline; } .wp-form { display: flex; flex-direction: column; gap: 0.6rem; } .wp-form input { padding: 0.65rem 0.9rem; border: 1px solid #cbd5e1; border-radius: 8px; font-family: 'Work Sans', sans-serif; font-size: 0.9rem; background: #fff; width: 100%; } .wp-form input:focus { outline: 2px solid #2563eb; border-color: transparent; } .wp-btn { background: #2563eb; color: #fff; border: none; padding: 0.7rem 1.25rem; border-radius: 8px; cursor: pointer; font-family: 'Work Sans', sans-serif; font-size: 0.92rem; font-weight: 600; transition: background 0.2s; width: 100%; } .wp-btn:hover { background: #1d4ed8; } .wp-footer { background: #0f172a; color: #94a3b8; padding: 2.5rem 2rem; margin-top: 3rem; } .wp-footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; } .wp-footer-logo { color: #fff; font-size: 1.3rem; font-weight: 700; } .wp-footer-links { display: flex; gap: 1.5rem; flex-wrap: wrap; justify-content: center; } .wp-footer-links a { color: #94a3b8; text-decoration: none; font-size: 0.83rem; } .wp-footer-links a:hover { color: #fff; } .wp-disclaimer { font-size: 0.77rem; color: #64748b; max-width: 680px; line-height: 1.6; margin-top: 0.5rem; } .wp-copyright { font-size: 0.82rem; } .wp-cookie { position: fixed; bottom: 0; left: 0; right: 0; background: #1e293b; color: #f1f5f9; padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; z-index: 10000; gap: 1rem; box-shadow: 0 -4px 16px rgba(0,0,0,0.2); } .wp-cookie p { font-size: 0.87rem; line-height: 1.5; } .wp-cookie a { color: #60a5fa; } .wp-cookie-btn { background: #2563eb; color: #fff; border: none; padding: 0.6rem 1.25rem; border-radius: 8px; cursor: pointer; font-family: 'Work Sans', sans-serif; font-size: 0.9rem; font-weight: 600; white-space: nowrap; flex-shrink: 0; } .wp-success-box { background: #eff6ff; border-radius: 16px; padding: 3rem 2rem; text-align: center; max-width: 560px; margin: 4rem auto; border: 1px solid #bfdbfe; } .wp-success-box h1 { color: #2563eb; font-size: 2rem; margin-bottom: 1rem; } .wp-success-box p { color: #475569; line-height: 1.75; margin-bottom: 0.75rem; } .wp-policy h2 { font-size: 1.3rem; font-weight: 700; margin: 1.75rem 0 0.6rem; color: #1e293b; } .wp-policy p, .wp-policy li { line-height: 1.85; color: #374151; font-size: 0.97rem; margin-bottom: 0.75rem; } .wp-policy ul { margin: 0.5rem 0 1rem 1.5rem; } @media (max-width: 768px) { .wp-layout { grid-template-columns: 1fr; } .wp-header { flex-direction: column; gap: 0.6rem; align-items: flex-start; } .wp-nav { flex-wrap: wrap; gap: 0.75rem; } h1.wp-title { font-size: 1.5rem; } .wp-hero-img { height: 220px; } .wp-cookie { flex-direction: column; align-items: flex-start; } }