/* Critical CSS - Inlined in for above-the-fold rendering */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --color-primary:#C41E3A; --color-primary-dark:#8B0000; --color-accent:#FFD700; --color-accent-light:#FFF8DC; --color-bg:#FFF9F0; --color-text:#1A1A2E; --color-text-light:#555; --color-border:#E0D4C8; --color-white:#fff; --font-display:'ZCOOL XiaoWei',serif; --font-body:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; --max-width:1200px; --spacing-xs:0.25rem; --spacing-sm:0.5rem; --spacing-md:1rem; --spacing-lg:2rem; --spacing-xl:4rem } @font-face{ font-family:'ZCOOL XiaoWei'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/zcool-xiaowei-latin.woff2') format('woff2') } html{font-size:16px;scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{font-family:var(--font-body);color:var(--color-text);background:var(--color-bg);line-height:1.7} img{max-width:100%;height:auto;display:block} a{color:var(--color-primary);text-decoration:none;transition:color .2s} a:hover{color:var(--color-primary-dark)} /* Header */ .site-header{background:var(--color-primary);color:var(--color-white);padding:0.75rem 1rem;position:sticky;top:0;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.15)} .header-inner{max-width:var(--max-width);margin:0 auto;display:flex;align-items:center;justify-content:space-between} .site-logo{font-family:var(--font-display);font-size:1.4rem;color:var(--color-accent);text-decoration:none;line-height:1.2} .site-logo:hover{color:var(--color-white)} .nav-toggle{display:none;background:none;border:none;color:var(--color-white);font-size:1.5rem;cursor:pointer} .main-nav ul{display:flex;list-style:none;gap:1.5rem} .main-nav a{color:var(--color-white);font-size:.9rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:.25rem 0;border-bottom:2px solid transparent;transition:border-color .2s} .main-nav a:hover,.main-nav a.active{color:var(--color-accent);border-bottom-color:var(--color-accent)} /* Hero / H1 section */ .hero{background:linear-gradient(135deg,var(--color-primary-dark) 0%,var(--color-primary) 100%);color:var(--color-white);padding:var(--spacing-xl) var(--spacing-md);text-align:center} .hero h1{font-family:var(--font-display);font-size:clamp(1.8rem,5vw,3rem);color:var(--color-accent);margin-bottom:var(--spacing-sm);line-height:1.2} .hero .intro{font-size:1.1rem;max-width:700px;margin:0 auto;opacity:.95} /* Headings */ h1,h2,h3{font-family:var(--font-display);color:var(--color-primary-dark);line-height:1.3} h2{font-size:clamp(1.4rem,3.5vw,2rem);margin:var(--spacing-xl) 0 var(--spacing-md);padding-bottom:var(--spacing-xs);border-bottom:3px solid var(--color-accent)} h3{font-size:clamp(1.1rem,2.5vw,1.5rem);margin:var(--spacing-lg) 0 var(--spacing-sm);color:var(--color-primary)} /* Main container */ .container{max-width:var(--max-width);margin:0 auto;padding:var(--spacing-lg) var(--spacing-md)} /* Comparison table */ .comparison-table{width:100%;border-collapse:collapse;margin:var(--spacing-lg) 0;background:var(--color-white);border-radius:8px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.08)} .comparison-table thead{background:var(--color-primary);color:var(--color-white)} .comparison-table th{padding:.75rem 1rem;text-align:left;font-size:.85rem;text-transform:uppercase;letter-spacing:.5px} .comparison-table td{padding:.75rem 1rem;border-bottom:1px solid var(--color-border);vertical-align:middle} .comparison-table tbody tr:hover{background:var(--color-accent-light)} .comparison-table .rank{font-family:var(--font-display);font-size:1.3rem;color:var(--color-primary);font-weight:700;text-align:center;width:50px} .comparison-table .brand-logo{width:120px;height:50px;object-fit:contain} .comparison-table .btn-visit{display:inline-block;background:var(--color-accent);color:var(--color-text);padding:.4rem 1rem;border-radius:4px;font-weight:700;font-size:.85rem;transition:background .2s,transform .1s} .comparison-table .btn-visit:hover{background:var(--color-primary);color:var(--color-white);transform:translateY(-1px)} /* Top 3 highlight */ .comparison-table tbody tr:nth-child(-n+3){background:linear-gradient(90deg,var(--color-accent-light) 0%,var(--color-white) 100%)} .comparison-table tbody tr:nth-child(-n+3) .rank{color:var(--color-accent);font-size:1.6rem;text-shadow:1px 1px 2px rgba(0,0,0,.15)} /* Table wrapper for horizontal scroll on mobile */ .table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--spacing-lg) 0} /* Mobile responsive */ @media(max-width:767px){ .nav-toggle{display:block} .main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-primary-dark);padding:1rem} .main-nav.open{display:block} .main-nav ul{flex-direction:column;gap:.5rem} .main-nav a{display:block;padding:.5rem 1rem} /* Comparison table -> cards */ .comparison-table{margin:0} .comparison-table,.comparison-table thead,.comparison-table tbody,.comparison-table th,.comparison-table td,.comparison-table tr{display:block} .comparison-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)} .comparison-table tbody tr{margin-bottom:.75rem;border:2px solid var(--color-border);border-radius:10px;padding:.75rem;background:var(--color-white);box-shadow:0 2px 6px rgba(0,0,0,.06)} .comparison-table tbody tr:nth-child(-n+3){border-color:var(--color-accent)} .comparison-table td{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;border-bottom:1px solid #f0ebe5;gap:.5rem} .comparison-table td::before{content:attr(data-label);font-weight:700;font-size:.75rem;color:var(--color-text-light);text-transform:uppercase;flex-shrink:0;min-width:80px} .comparison-table td:first-child{justify-content:center;border-bottom:2px solid var(--color-accent)} .comparison-table td:first-child::before{display:none} .comparison-table td:last-child{border-bottom:none;justify-content:center;padding-top:.75rem} .comparison-table td:last-child::before{display:none} .comparison-table .brand-logo{width:90px;height:36px} .comparison-table .btn-visit{width:100%;text-align:center;padding:.6rem;font-size:.9rem;border-radius:6px} /* Info table -> horizontal scroll */ .info-table{min-width:500px} /* Hero */ .hero{padding:2rem 1rem} .hero h1{font-size:1.6rem} .hero .intro{font-size:.95rem} } /* Footer */ .site-footer{background:var(--color-text);color:var(--color-white);padding:2rem 1rem} .footer-inner{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:2rem} .footer-section h3{font-family:var(--font-display);color:var(--color-accent);font-size:1.1rem;margin-bottom:.5rem} .footer-section a{color:rgba(255,255,255,.7);font-size:.9rem;display:block;padding:.2rem 0} .footer-section a:hover{color:var(--color-accent)} .footer-section p{font-size:.85rem;color:rgba(255,255,255,.6);line-height:1.6} .footer-section .links-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.35rem;margin:.5rem 0} .footer-section .links-grid a{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:.35rem .5rem;border-radius:4px;font-size:.78rem;color:#fff;text-align:center;display:block} .footer-section .links-grid a:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-accent)} .footer-bottom{max-width:var(--max-width);margin:2rem auto 0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.1);text-align:center;font-size:.8rem;color:rgba(255,255,255,.4)} .footer-disclaimer{background:var(--color-primary-dark);color:rgba(255,255,255,.7);padding:1rem;text-align:center;font-size:.8rem;line-height:1.6} .footer-disclaimer a{display:inline;color:var(--color-accent)} @media(max-width:767px){.footer-inner{grid-template-columns:1fr}}