/* ChinaMakersHub — shared footer stylesheet * Single source of truth for the site-wide footer + footer logo. * Extracted from the homepage (web/index.html), which is the visual master. * Linked last in on every page so it overrides any older footer rules * still living in article.css / factory.css until those are cleaned up. * Relies on the page's own :root palette vars (--ink / --paper / --cinnabar / * --font-mono) — it does not redefine them. */ footer { background: var(--ink); color: var(--paper); padding: 5rem 0 2rem; } .footer-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(244, 239, 230, 0.12); } /* factory detail pages carry an extra per-factory contact column */ .footer-top.has-factory-contact { grid-template-columns: 1.2fr 1fr 1fr 1fr 1fr; } .footer-brand .logo { color: var(--paper); margin-bottom: 1.5rem; } .footer-brand .logo-mark { background: var(--paper); color: var(--ink); } .footer-brand .logo-mark::after { border-color: var(--ink); } .footer-brand p { font-size: 0.88rem; color: rgba(244, 239, 230, 0.6); line-height: 1.6; max-width: 22em; } /* contact rows — used for CMH contact in the brand block and for the per-factory contact column on factory detail pages */ .footer-contact { margin-top: 1.3rem; } .footer-contact-item { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.82rem; color: rgba(244, 239, 230, 0.6); line-height: 1.6; margin-bottom: 0.55rem; } .footer-contact-item svg { flex-shrink: 0; margin-top: 3px; opacity: 0.5; } .footer-contact-item a { color: inherit; text-decoration: none; transition: color 0.3s; } .footer-contact-item a:hover { color: var(--paper); } .footer-col h5 { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--cinnabar); margin-bottom: 1.5rem; } .footer-col ul { list-style: none; } .footer-col li { margin-bottom: 0.7rem; } .footer-col a { font-size: 0.88rem; color: rgba(244, 239, 230, 0.7); text-decoration: none; transition: color 0.3s; } .footer-col a:hover { color: var(--paper); } .footer-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; padding-top: 2.5rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: rgba(244, 239, 230, 0.5); line-height: 1.7; } .footer-legal { text-transform: uppercase; } .footer-legal strong { display: block; color: var(--paper); margin-bottom: 0.5rem; } .footer-bank { text-align: right; text-transform: uppercase; } .footer-bank strong { display: block; color: var(--paper); margin-bottom: 0.5rem; } @media (max-width: 1024px) { .footer-top, .footer-top.has-factory-contact { grid-template-columns: 1fr 1fr; } } @media (max-width: 640px) { .footer-top, .footer-top.has-factory-contact { grid-template-columns: 1fr; } .footer-bottom { grid-template-columns: 1fr; } .footer-bank { text-align: left; } } /* 顶部跑马灯 — 供未 link article.css 的页 (factories / categories) 用; 与 article.css 同规则 */ .marquee{background:var(--ink);color:var(--paper);padding:0.6rem 0;font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.12em;text-transform:uppercase;overflow:hidden;} .marquee-track{display:flex;white-space:nowrap;animation:scroll 40s linear infinite;} .marquee-track span{padding:0 2rem;display:flex;align-items:center;gap:2rem;} .marquee-track span::after{content:'\25C6';font-size:0.5rem;opacity:0.5;} @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}