/* site.css · Local & Now 官网统一设计系统 (v1 · 苹果风格样张) SF/系统字体 · 大留白 · 紧字距 · 胶囊按钮 · 中性灰 + 蓝色点睛 风格未锁定，此为"苹果方向"。换肤改 :root。详见 docs/design/v1-official-site.md */ /* 设计 token = 单一真源。规则见 docs/design/DESIGN-RULES.md。禁止页面里写裸 px/颜色。 */ :root{ --bg:#ffffff; --gray:#f5f3ee; --gray-2:#faf8f3; --ink:#1d1a14; --ink-2:#6a6256; --ink-3:#928a7c; --ink-deep:#16130d; --line:#e1d8c6; --line-soft:#efe9dc; /* 黑金强调色（accent 即 gold，全站唯一强调色）*/ --accent:#b08a3e; --accent-ink:#876a2f; --accent-soft:rgba(176,138,62,.13); --gold:#b08a3e; --gold-ink:#876a2f; --gold-soft:rgba(176,138,62,.13); --gold-text:#f0e2bf; --ok:#1d8a3f; --warn:#bf4800; --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text",system-ui,"PingFang SC","Noto Sans SC","Helvetica Neue",Arial,sans-serif; /* 确定性字号阶（只此 6 档）*/ --fs-display:clamp(26px,4.4vw,40px); --fs-xl:22px; --fs-lg:18px; --fs-md:15px; --fs-sm:13px; --fs-xs:12px; /* 控件统一高 */ --ctl-sm:34px; --ctl:44px; --maxw:1080px; --radius:18px; --radius-sm:12px; --pill:980px; --ease:cubic-bezier(.28,.11,.32,1); } *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;} body{background:var(--bg);color:var(--ink);font-family:var(--font);font-size:var(--fs-md);line-height:1.5;letter-spacing:0;-webkit-font-smoothing:antialiased;} a{color:var(--accent);text-decoration:none;} a:hover{text-decoration:underline;} img{max-width:100%;display:block;} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;} .kicker{font-size:var(--fs-sm);font-weight:600;letter-spacing:.02em;color:var(--accent);} .center{text-align:center;} /* 标题字阶（苹果式：大、半粗、紧字距） */ .h1{font-size:clamp(40px,6.4vw,72px);font-weight:600;line-height:1.05;letter-spacing:-.025em;} .h2{font-size:clamp(30px,4.4vw,48px);font-weight:600;line-height:1.08;letter-spacing:-.022em;} .h3{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.015em;} .lede{font-size:clamp(19px,2.2vw,24px);color:var(--ink-2);font-weight:400;letter-spacing:-.01em;} /* 导航 */ .nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.8);backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft);} .nav .wrap{display:flex;align-items:center;height:52px;gap:30px;} .nav-brand{font-size:var(--fs-lg);font-weight:600;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;} .nav-brand:hover{text-decoration:none;} .nav-links{display:flex;gap:28px;} .nav-links a{font-size:var(--fs-md);color:var(--ink);opacity:.85;} .nav-links a:hover{opacity:1;text-decoration:none;color:var(--accent);} .nav-right{margin-left:auto;display:flex;align-items:center;gap:18px;} .nav-right a{font-size:var(--fs-md);color:var(--ink);opacity:.85;} .nav-cta{background:var(--accent);color:#fff!important;padding:6px 15px;border-radius:var(--pill);font-size:var(--fs-md);font-weight:400;opacity:1!important;} .nav-cta:hover{background:var(--accent-ink);text-decoration:none;} .nav-burger{display:none;background:none;border:none;cursor:pointer;font-size:var(--fs-xl);color:var(--ink);margin-left:auto;} /* 按钮（胶囊） */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:var(--fs-lg);font-weight:400;padding:11px 22px;border-radius:var(--pill);cursor:pointer;border:1px solid transparent;transition:.2s;letter-spacing:-.01em;} .btn:hover{text-decoration:none;} .btn-primary{background:var(--accent);color:#fff;} .btn-primary:hover{background:var(--accent-ink);} .btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);} .btn-ghost:hover{border-color:var(--ink-3);} .btn-text{color:var(--accent);font-size:var(--fs-lg);padding:0;} .btn-text::after{content:" ›";} /* 区段 */ .section{padding:96px 0;} .section.gray{background:var(--gray);} .section-head{max-width:720px;margin:0 auto 54px;text-align:center;} .section-head .lede{margin-top:12px;} /* 卡片 */ .grid{display:grid;gap:20px;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:repeat(2,1fr);} .card{background:var(--gray);border-radius:var(--radius);padding:34px;transition:.3s var(--ease);} a.card:hover{text-decoration:none;transform:scale(1.012);} .card .ic{font-size:26px;margin-bottom:16px;} .card h3{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.015em;margin-bottom:8px;} .card p{color:var(--ink-2);font-size:var(--fs-md);} .card .more{color:var(--accent);font-size:var(--fs-md);margin-top:14px;display:inline-block;} /* 数字 */ .stats{display:flex;flex-wrap:wrap;gap:10px;} .stat{flex:1;min-width:150px;text-align:center;padding:14px;} .stat .n{font-size:54px;font-weight:600;line-height:1;letter-spacing:-.03em;} .stat .n b{color:var(--accent);} .stat .u{font-size:var(--fs-xl);} .stat .l{font-size:var(--fs-md);color:var(--ink-3);margin-top:10px;} /* 通用搜索框（首页/搜索页共用） */ .searchbox{display:flex;align-items:center;background:var(--gray);border-radius:var(--pill);padding:4px 4px 4px 22px;border:1px solid transparent;transition:.2s;} .searchbox:focus-within{background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);} .searchbox .mag{color:var(--ink-3);font-size:var(--fs-lg);margin-right:10px;} .searchbox input{flex:1;border:none;outline:none;background:transparent;font-family:var(--font);font-size:var(--fs-lg);color:var(--ink);padding:14px 0;} .searchbox input::placeholder{color:var(--ink-3);} .searchbox button{background:var(--accent);color:#fff;border:none;border-radius:var(--pill);padding:12px 24px;font-size:var(--fs-md);cursor:pointer;font-family:var(--font);} .searchbox button:hover{background:var(--accent-ink);} /* 结果卡片（搜索页） */ .result{display:block;padding:20px;border-radius:var(--radius);transition:background .2s;} .result:hover{background:var(--gray);text-decoration:none;} .result .top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;} .result .nm{font-size:var(--fs-xl);font-weight:600;letter-spacing:-.015em;color:var(--ink);} .result .nm .en{font-size:var(--fs-md);font-weight:400;color:var(--ink-3);margin-left:7px;} .result .dist{font-size:var(--fs-md);color:var(--ink-3);white-space:nowrap;} .result .sum{color:var(--ink-2);font-size:var(--fs-md);margin-top:3px;} .badges{margin-top:11px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;} .badge{font-size:var(--fs-xs);font-weight:500;padding:4px 11px;border-radius:var(--pill);background:var(--gray);color:var(--ink-2);} .badge.open{background:#e3f5e9;color:var(--ok);} .badge.closed{background:#f0f0f2;color:var(--ink-3);} .badge.deliver{background:var(--accent-soft);color:var(--accent-ink);} /* 实时流（广场） */ .ev{display:flex;gap:14px;padding:16px 0;border-top:1px solid var(--line-soft);} .ev:first-child{border-top:none;} .ev .cat{flex:0 0 auto;font-size:var(--fs-xs);font-weight:600;padding:4px 10px;border-radius:var(--pill);background:var(--gray);color:var(--ink-3);height:fit-content;white-space:nowrap;} .ev .cat.open{background:var(--accent-soft);color:var(--accent-ink);} .ev .cat.done{background:#e3f5e9;color:var(--ok);} .ev .nm2{font-size:var(--fs-md);font-weight:600;color:var(--ink);} .ev .snip{color:var(--ink-2);font-size:var(--fs-md);} .ev .m{font-size:var(--fs-sm);color:var(--ink-3);margin-top:3px;} /* 页脚（苹果式浅灰） */ .footer{background:var(--gray);border-top:1px solid var(--line-soft);padding:40px 0 28px;font-size:var(--fs-xs);color:var(--ink-3);} .footer a{color:var(--ink-2);} .footer-top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:26px;padding-bottom:24px;border-bottom:1px solid var(--line);} .footer-brand .b{font-size:var(--fs-lg);font-weight:600;color:var(--ink);} .footer-brand p{margin-top:8px;max-width:230px;line-height:1.5;} .footer-social{display:flex;gap:14px;margin-top:14px;font-size:var(--fs-sm);} .footer-col h4{font-size:var(--fs-xs);font-weight:600;color:var(--ink);margin-bottom:10px;} .footer-col a{display:block;line-height:2.1;} .footer-col a:hover{color:var(--accent);text-decoration:none;} .footer-bot{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:18px;} .footer-lang a{margin-left:14px;} @keyframes rise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,113,227,.4);}70%{box-shadow:0 0 0 8px rgba(0,113,227,0);}100%{box-shadow:0 0 0 0 rgba(0,113,227,0);}} @media(max-width:840px){ .nav-links,.nav-right .nav-cta,.nav-right>a{display:none;} .nav-burger{display:block;} .nav.open .nav-links{display:flex;position:absolute;top:52px;left:0;right:0;flex-direction:column;background:rgba(255,255,255,.96);backdrop-filter:blur(20px);border-bottom:1px solid var(--line);padding:12px 22px;gap:2px;} .nav.open .nav-links a{padding:11px 0;font-size:var(--fs-lg);} .grid-3,.grid-2{grid-template-columns:1fr;} .footer-top{grid-template-columns:1fr 1fr;}.footer-brand{grid-column:1/-1;} .section{padding:64px 0;} } @media(max-width:480px){.footer-top{grid-template-columns:1fr;}} /* =================================================================== 复用组件 · 全站统一页头/页脚/搜索（规则见 docs/design/DESIGN-RULES.md） 用法：
…