/* =============================================================
* pupu-landing shared chrome
* -------------------------------------------------------------
* Single source of truth for the nav pill, footer, and other
* chrome that all 24 static HTML pages used to duplicate.
*
* Load order in each page:
*
*
*
*
* Site-wide unification: nav pill, footer, font, reset, brand
* colors, selection color are all defined exactly once here.
* ============================================================= */
/* ===== Font (variable, local, GB2312 subset 2.7MB) ===== */
@font-face {
font-family: 'OPPO Sans 4.0';
src: url('/fonts/OPPO-Sans-4.0.woff2') format('woff2-variations'),
url('/fonts/OPPO-Sans-4.0.woff2') format('woff2');
font-weight: 100 700;
font-style: normal;
font-display: optional;
}
/* ===== Brand tokens (single source of truth for the static site) =====
These mirror tailwind.config.js so React pages and static pages
stay in sync. Keep names stable — they're a contract. */
:root {
--color-bg: #ffffff;
--color-text: #1a1a1a;
--color-text-2: #3a3a3a;
--color-muted: #8a8a8a;
--color-brand: #E71219;
--color-line: #EDE7DE;
--color-line-2: #E8E2D5;
/* Brand red at 15% alpha — a soft pink wash that ties the inner
block (e.g. .contact-card-side, .partner-card-side) to the site
palette without competing with the copy. Tweak alpha, not hex, to
change intensity. */
--color-brand-soft: rgba(231, 18, 25, 0.15);
--font-display: 'OPPO Sans 4.0', -apple-system, BlinkMacSystemFont,
'PingFang SC', sans-serif;
--font-body: 'OPPO Sans 4.0', -apple-system, BlinkMacSystemFont,
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
}
/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font-body);
background: var(--color-bg);
color: var(--color-text);
line-height: 1.7;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100vh;
overflow-x: hidden;
}
a { color: var(--color-brand); text-decoration: none; }
a:hover { text-decoration: underline; }
::selection { background: var(--color-brand); color: #fff; }
/* ===== Nav pill (mount point) =====
The nav block is injected by chrome.js into
. We reserve the vertical space so the page
doesn't jump when JS hydrates. */
#pupu-nav {
width: 100%;
padding: 16px 0 0;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative; /* host for the absolute-positioned logo */
min-height: 56px; /* pill height + 16px top padding */
}
/* Logo — 站点 logo，绝对定位在左上角，不占 flex 槽位让菜单仍居中 */
#pupu-nav .pupu-nav-logo {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
#pupu-nav .pupu-nav-logo img {
height: 32px;
width: auto;
display: block;
}
#pupu-nav .pupu-nav-pill {
border-radius: 50px;
background: #ffffff;
border: 1px solid var(--color-line);
box-shadow: 0 8px 24px rgba(24, 99, 220, 0.05);
padding: 8px 16px;
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-body);
}
#pupu-nav .pupu-nav-link {
font-size: 10px;
color: var(--color-text);
text-decoration: none;
white-space: nowrap;
transition: color .15s ease;
display: inline-flex;
align-items: center;
}
#pupu-nav .pupu-nav-link:hover {
color: var(--color-brand);
text-decoration: none;
}
/* Hide the link whose pageId matches the current page */
#pupu-nav[data-current] [data-current-page] { display: none; }
/* Responsive sizing — mirrors the React