/* ============================================================================
MEDAL — Xiamen Medal International Trade Co.,Ltd
Global stylesheet (single source of truth for all 12 pages)
----------------------------------------------------------------------------
Contents
0. Web fonts (self-hosted Inter / Manrope)
1. Design tokens (CSS variables)
2. Reset & base
3. Typography & helpers
4. Layout primitives (container / section / grids)
5. Buttons
6. Header & navigation
7. Mobile drawer
8. Language switcher
9. Hero (home) & page-hero (inner pages)
10. Home sections (stats / advantages / products / industries / certs / process)
11. Cards
12. Media frames (image placeholders)
13. Breadcrumb
14. Spec table
15. FAQ (details/summary)
16. Contact page
17. CTA banner
18. Footer
19. Back to top
20. Placeholder values
21. Animations & reveal
22. Responsive (1024 / 768 / 480)
23. Accessibility & print
============================================================================ */
/* ===== 0. Web fonts (self-hosted Inter / Manrope) ===== */
/* Inter (wght 400..800) and Manrope (wght 500..800), downloaded as VARIABLE woff2 from Google Fonts'
own CDN and served from this origin. Why self-hosted rather than the to fonts.googleapis.com
that used to sit in all 12 pages' :
- one less third-party origin: no preconnect pair, no cross-origin round trip, no CDN outage;
- the site (and every measurement harness) now works with the network completely closed;
- and the reason this was asked for: the guide TOC's chips WRAP, so its row count — and therefore
the bar height that main.js measures and the --toc-h fallback constant — is font-dependent. A
font that arrives from a CDN, with `display: swap`, cannot pin that constant to a real value.
Every earlier measurement in this repo was taken with the Google Fonts request aborted, i.e. in
Segoe UI; from here on the font that is measured IS the font that ships.
ONLY the `latin` and `latin-ext` subsets are downloaded — 4 files, 169.2 KB in total. `latin` spans
U+0000-00FF, which covers every Spanish accented character (a-acute e-acute i-acute o-acute
u-acute n-tilde u-diaeresis inverted-question inverted-exclamation) and every English one;
`latin-ext` adds the rest of Latin Extended-A/B. The other 9 subsets Google serves (cyrillic,
cyrillic-ext, greek, greek-ext, vietnamese) are deliberately NOT included: this site has no such
content, and an unused subset is pure weight. CJK is unaffected — Inter/Manrope carry no CJK glyphs,
so Chinese keeps resolving to the system stack in --font-sans below, exactly as it did before.
`font-weight: 400 800` is the variable-axis range; `font-display: swap` keeps text visible while the
(local, therefore short) font load happens. `unicode-range` is kept verbatim from the source CSS, so
a page never fetches a subset it has no character for. Paths are relative to THIS file. */
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/inter/inter-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 800;
font-display: swap;
src: url('../fonts/inter/inter-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('../fonts/manrope/manrope-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308,
U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Manrope';
font-style: normal;
font-weight: 500 800;
font-display: swap;
src: url('../fonts/manrope/manrope-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
U+2C60-2C7F, U+A720-A7FF;
}
/* ===== 1. Design tokens ===== */
:root {
/* Brand colours (extracted from logo) */
--brand-primary: #1B23C0;
--brand-primary-deep: #141C9E;
--brand-light: #3B8FF0;
--brand-accent: #E8342B;
--brand-gradient: linear-gradient(135deg, #3B8FF0 0%, #1B23C0 100%);
--brand-gradient-soft: linear-gradient(135deg, rgba(59, 143, 240, .12) 0%, rgba(27, 35, 192, .12) 100%);
/* Neutrals */
--white: #FFFFFF;
--bg-soft: #F5F7FA;
--bg-navy: #0B1046;
--bg-navy-2: #101551;
--border: #E5E7EB;
--text: #374151;
--text-strong: #111827;
--text-soft: #6B7280;
--text-on-dark: rgba(255, 255, 255, .86);
--text-on-dark-soft: rgba(255, 255, 255, .66);
/* Typography */
--font-sans: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI',
'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', Roboto, Helvetica, Arial, sans-serif;
/* Elevation */
--shadow-xs: 0 1px 2px rgba(15, 23, 42, .06);
--shadow-sm: 0 2px 10px rgba(15, 23, 42, .06);
--shadow-md: 0 12px 30px rgba(15, 23, 42, .10);
--shadow-lg: 0 24px 56px rgba(15, 23, 42, .16);
/* Radii */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
/* Layout */
--container: 1200px;
--gutter: clamp(1.1rem, 4vw, 2rem);
--header-h: 74px;
/* --- Scroll-into-view geometry for guide.html's sticky table of contents ---
--anchor-gap: the air we want between the bottom of the sticky stack and the heading a reader
just asked to jump to.
--toc-h: the sticky .toc bar's height. MEASURED, never guessed, and it cannot be expressed in
CSS: it changes whenever the chips wrap. It must be an UPPER BOUND for its band, never an exact
value: concealment (the heading landing under the bar) is the bug, overshoot is only slack.
The authoritative numbers come from a full sweep of every integer width 320..1440 x 3 languages
with the shipped self-hosted font loaded (_geom_pass/t1_sweep.json), in which the chip metrics
change exactly once — the row-gap goes 4.48px -> 9.6px at 827 — so there are exactly two
metric-homogeneous bands, plus the inherited <=552 split:
>=827 1 row 67.9531 / 2 rows 117.3125 -> max needed 2 rows (en 827..840, es 827..912)
=> 120px (2.69px slack). 913..1440 are one row in all three languages, so this
band deliberately overshoots by up to 52.05px. It CANNOT be made exact: at 827
the bar's content box is 763px and es needs ~849px, so no padding tweak fits es
on one row, and a boundary at es's 912/913 flip would be a wrap point.
553..826 1 row 56.1406 / 2 rows 88.5625 -> max needed 2 rows (en 553..563, es 553..623)
=> 91px (2.44px slack)
<=552 1 row 56.1406 / 2 rows 88.5625 / 3 rows 120.9844
-> max needed 3 rows (en 320..350, es 320..384) => 123px (2.02px slack)
This is the fix for F1's remaining hole: the 2026-09-16 copy pass lengthened guide.toc.barrier
and guide.toc.select, which moved Spanish's two-row window from 552..~560 out to 553..623 and
pushed en and es to THREE rows below 351/385. The old constants (68/56/89) therefore concealed
the heading by up to 49.31px at >=827 and by up to 32.56px in 553..623.
It serves the no-JS / native-fragment path ONLY; main.js initGuideToc() measures the real height
at click time and is the authoritative path. initGuideToc() also READS --anchor-gap, so the two
must agree.
--scroll-pad-extra: how far html's scroll-padding-top (below) exceeds --header-h. Named so the
two cannot drift apart. */
--anchor-gap: 20px;
--toc-h: 120px;
--scroll-pad-extra: 16px;
/* F1 (layout-fix): .section pads BOTH sides with this token, so two adjacent sections used to
stack 2 x 88px = 176px of empty band at 1440 (107.5px @768, 104px @390) — the single largest
contributor to page-level whitespace site-wide. Lowering the token to clamp(3rem, 5vw, 3.75rem)
gives a 120px seam at 1440 and <=96px below 960px. Only consumed by `.section` (verified). */
--section-y: clamp(3rem, 5vw, 3.75rem);
--float-bottom: clamp(1.5rem, 5vw, 3.25rem);
/* Motion */
--ease: cubic-bezier(.22, .61, .36, 1);
--dur-fast: .16s;
--dur: .3s;
--dur-slow: .6s;
}
/* ===== 2. Reset & base ===== */
*,
*::before,
*::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: calc(var(--header-h) + var(--scroll-pad-extra));
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font-sans);
font-size: 1rem;
line-height: 1.7;
color: var(--text);
background: var(--white);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
body.has-drawer-open { overflow: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--brand-primary); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--brand-light); }
button { font-family: inherit; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
svg { display: block; }
/* [hidden] must win over component display rules such as .product-card { display: flex } */
[hidden] { display: none !important; }
:focus-visible {
outline: 3px solid var(--brand-light);
outline-offset: 2px;
border-radius: 4px;
}
/* ===== 3. Typography & helpers ===== */
h1, h2, h3, h4, h5 {
margin: 0 0 .6em;
color: var(--text-strong);
line-height: 1.2;
font-weight: 800;
letter-spacing: -.015em;
}
h1 { font-size: clamp(2rem, 4.4vw, 3.25rem); }
h2 { font-size: clamp(1.6rem, 3vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
h4 { font-size: 1.05rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }
.text-soft { color: var(--text-soft); }
.text-center { text-align: center; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.eyebrow {
display: inline-flex; align-items: center; gap: .5rem;
font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
color: var(--brand-primary);
background: var(--brand-gradient-soft);
padding: .35rem .85rem; border-radius: var(--radius-pill);
margin-bottom: 1rem;
}
.eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-accent); }
.eyebrow.is-light { color: #fff; background: rgba(255, 255, 255, .14); }
/* Icon helper */
.icon { width: 24px; height: 24px; stroke-width: 1.8; flex: 0 0 auto; }
/* ===== 4. Layout primitives ===== */
.container {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--soft { background: var(--bg-soft); }
.section--navy { background: var(--bg-navy); color: var(--text-on-dark); }
.section--navy h2, .section--navy h3, .section--navy h4 { color: #fff; }
.section-head { max-width: 720px; margin: 0 auto 2.75rem; text-align: center; }
.section-head p { color: var(--text-soft); font-size: 1.05rem; }
.section-head.is-left { margin-inline: 0; text-align: left; }
.section--navy .section-head p { color: var(--text-on-dark-soft); }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* F7 (layout-fix) — orphan-row centring modifier. A plain 3-col grid leaves 2/3 of the last row
empty whenever the item count is not a multiple of 3 (filtered products, the 7 showcase cards,
the 5 guide cards). `is-centered` swaps the grid for a wrapping flex line whose items are
EXACTLY the grid track width: calc((100% - 3rem) / 3) reproduces 3x1fr tracks including the two
1.5rem gaps, so a full page is pixel-identical (same widths, same left edges), while a partial
last row is centred instead of hugging the left edge. `min-width: 0` mimics minmax(0,1fr);
align-items keeps the flex default `stretch`, matching the grid's equal-height rows. Hidden
cards ([hidden] -> display:none) simply don't participate in the flex line. */
.grid-3.is-centered { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; }
/* F35: the cards carry `height: 100%`, which blocks flex `stretch` (it only applies to `auto`),
so shorter texts left ragged card bottoms within one row. `height: auto` re-enables stretch —
every card in a line matches its tallest sibling and `.card-link` sinks via margin-top:auto. */
.grid-3.is-centered > * { flex: 0 1 calc((100% - 3rem) / 3); min-width: 0; height: auto; }
/* ===== 5. Buttons ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
padding: .8rem 1.5rem; border-radius: var(--radius-pill);
font-weight: 700; font-size: .95rem; line-height: 1; border: 2px solid transparent;
transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur) var(--ease),
background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: var(--brand-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--brand-primary-deep); color: #fff; box-shadow: var(--shadow-md); }
.btn-gradient { background: var(--brand-gradient); color: #fff; box-shadow: var(--shadow-sm); }
.btn-gradient:hover { color: #fff; box-shadow: var(--shadow-md); }
.btn-outline { background: transparent; color: var(--brand-primary); border-color: var(--brand-primary); }
.btn-outline:hover { background: var(--brand-primary); color: #fff; }
.btn-ghost-light { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .5); }
.btn-ghost-light:hover { background: #fff; color: var(--brand-primary); border-color: #fff; }
.btn-light { background: #fff; color: var(--brand-primary); }
.btn-light:hover { color: var(--brand-primary-deep); box-shadow: var(--shadow-md); }
.btn-sm { padding: .55rem 1.05rem; font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: .9rem; }
.btn-row.is-center { justify-content: center; }
/* ===== 6. Header & navigation ===== */
.site-header {
position: fixed; inset: 0 0 auto 0; z-index: 100;
height: var(--header-h);
background: transparent;
border-bottom: 1px solid transparent;
transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.site-header.is-scrolled {
background: rgba(255, 255, 255, .94);
-webkit-backdrop-filter: saturate(180%) blur(12px);
backdrop-filter: saturate(180%) blur(12px);
box-shadow: 0 6px 24px rgba(15, 23, 42, .08);
border-bottom-color: var(--border);
}
.header-inner { height: 100%; display: flex; align-items: center; gap: 1.25rem; }
.brand { display: inline-flex; align-items: center; gap: .65rem; flex: 0 0 auto; }
/* Logo 是透明底 PNG：深色导航栏上直接用白色版，滚动变浅底后换成蓝色版。
两个版本尺寸完全一致，切换时不会跳动，也不再需要白色底板。 */
.brand-logo-box { display: inline-flex; align-items: center; }
.brand-logo-box img { display: block; height: 42px; width: auto; }
.brand-logo-box .logo-on-light { display: none; }
.site-header.is-scrolled .brand-logo-box .logo-on-dark { display: none; }
.site-header.is-scrolled .brand-logo-box .logo-on-light { display: block; }
.main-nav { display: flex; align-items: center; gap: .35rem; margin-left: auto; }
.nav-link {
position: relative; padding: .5rem .85rem; border-radius: var(--radius-pill);
font-weight: 600; font-size: .95rem; color: rgba(255, 255, 255, .9);
transition: color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.nav-link::after {
content: ""; position: absolute; left: 50%; bottom: .28rem; width: 0; height: 2px;
background: var(--brand-accent); border-radius: 2px; transform: translateX(-50%);
transition: width var(--dur) var(--ease);
}
.nav-link:hover { color: #fff; }
.nav-link:hover::after, .nav-link.is-active::after { width: 22px; }
.nav-link.is-active { color: #fff; }
.site-header.is-scrolled .nav-link { color: var(--text); }
.site-header.is-scrolled .nav-link:hover,
.site-header.is-scrolled .nav-link.is-active { color: var(--brand-primary); }
.header-actions { display: flex; align-items: center; gap: .75rem; margin-left: .35rem; }
.menu-toggle {
display: none; flex-direction: column; justify-content: center; gap: 5px;
width: 44px; height: 44px; border: none; border-radius: 12px;
background: rgba(255, 255, 255, .12); align-items: center;
}
.menu-toggle span { width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: var(--dur) var(--ease); }
.site-header.is-scrolled .menu-toggle { background: var(--bg-soft); }
.site-header.is-scrolled .menu-toggle span { background: var(--text-strong); }
/* ===== 7. Mobile drawer ===== */
.drawer-overlay {
position: fixed; inset: 0; z-index: 199;
background: rgba(11, 16, 70, .5);
opacity: 0; visibility: hidden; transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.drawer-overlay.is-open { opacity: 1; visibility: visible; }
.mobile-drawer {
position: fixed; inset: 0 0 0 auto; z-index: 200;
width: min(340px, 86vw); background: #fff;
display: flex; flex-direction: column; gap: 1rem;
padding: 1.35rem; overflow-y: auto;
transform: translateX(102%); visibility: hidden;
transition: transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
box-shadow: var(--shadow-lg);
}
.mobile-drawer.is-open { transform: none; visibility: visible; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; }
.drawer-title { font-weight: 800; font-size: 1.1rem; color: var(--text-strong); }
.drawer-close {
width: 40px; height: 40px; border: 1px solid var(--border); border-radius: 12px;
background: #fff; font-size: 1.5rem; line-height: 1; color: var(--text-strong);
}
.drawer-nav { display: flex; flex-direction: column; }
.drawer-nav a {
padding: .9rem .25rem; border-bottom: 1px solid var(--border);
font-weight: 600; font-size: 1.05rem; color: var(--text-strong);
}
.drawer-nav a.is-active { color: var(--brand-primary); }
.drawer-cta { margin-top: auto; width: 100%; }
/* ===== 8. Language switcher (single dropdown) ===== */
.lang-switcher { position: relative; display: inline-flex; }
.lang-trigger {
display: inline-flex; align-items: center; gap: .45rem;
padding: .42rem .58rem .42rem .55rem;
border-radius: var(--radius-pill);
border: 1px solid rgba(255, 255, 255, .3);
background: rgba(255, 255, 255, .08);
color: rgba(255, 255, 255, .95);
font: inherit; font-size: .82rem; font-weight: 700; line-height: 1;
cursor: pointer; white-space: nowrap;
transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-trigger:hover { background: rgba(255, 255, 255, .16); }
.lang-trigger[aria-expanded="true"] { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .55); color: #fff; }
.lang-trigger .flag { width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .15); display: block; flex: 0 0 auto; }
.lang-trigger .chev { width: 12px; height: 12px; flex: 0 0 auto; transition: transform var(--dur) var(--ease); }
.lang-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); }
.site-header.is-scrolled .lang-trigger { color: var(--text-strong); border-color: var(--border); background: #fff; }
.site-header.is-scrolled .lang-trigger:hover { background: var(--bg-soft); }
.site-header.is-scrolled .lang-trigger[aria-expanded="true"] { border-color: var(--brand-light); background: var(--brand-gradient-soft); color: var(--brand-primary); }
.lang-menu {
position: absolute; top: calc(100% + .5rem); right: 0; z-index: 60;
min-width: 10.5rem; padding: .3rem;
display: grid; gap: .1rem;
background: #fff; border: 1px solid var(--border); border-radius: 14px;
box-shadow: 0 16px 40px rgba(15, 23, 42, .18);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.lang-menu.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option {
display: flex; align-items: center; gap: .6rem; width: 100%;
padding: .55rem .6rem; border: 0; border-radius: 10px;
background: transparent; color: var(--text-strong);
font: inherit; font-size: .88rem; font-weight: 600; text-align: left;
cursor: pointer; white-space: nowrap;
transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.lang-option .flag { width: 22px; height: 15px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); display: block; flex: 0 0 auto; }
.lang-option .lang-native { flex: 1 1 auto; }
.lang-option .tick { width: 15px; height: 15px; flex: 0 0 auto; color: var(--brand-primary); opacity: 0; }
.lang-option:hover { background: var(--bg-soft); }
.lang-option.is-active { color: var(--brand-primary); background: var(--brand-gradient-soft); }
.lang-option.is-active .tick { opacity: 1; }
/* 移动端抽屉：下拉改为原地展开，避免被抽屉裁剪 */
.drawer-lang {
position: relative; display: block;
padding-bottom: .9rem; border-bottom: 1px solid var(--border);
}
.drawer-lang .lang-trigger {
width: 100%; justify-content: flex-start;
padding: .7rem .85rem; border-radius: 12px; font-size: .95rem;
color: var(--text-strong); border-color: var(--border); background: #fff;
}
.drawer-lang .lang-trigger:hover { background: var(--bg-soft); }
.drawer-lang .lang-trigger .chev { margin-left: auto; }
.drawer-lang .lang-menu {
position: static; min-width: 0; margin-top: .5rem; width: 100%;
display: none; border-radius: 12px; box-shadow: none; transform: none;
}
.drawer-lang .lang-menu.is-open { display: grid; transform: none; }
/* ===== 9. Hero & page-hero ===== */
.hero {
position: relative; overflow: hidden;
padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 4.5rem));
padding-bottom: clamp(3rem, 7vw, 5.5rem);
background: var(--bg-navy);
color: var(--text-on-dark);
}
.hero::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 78% 12%, rgba(59, 143, 240, .45), transparent 46%),
radial-gradient(circle at 12% 88%, rgba(27, 35, 192, .65), transparent 52%),
linear-gradient(150deg, #0B1046 0%, #141C9E 100%);
}
.hero::after {
content: ""; position: absolute; left: -12%; right: -12%; bottom: -42%;
height: 62%; border-radius: 50%;
background: var(--brand-gradient); opacity: .16; filter: blur(30px);
}
.hero .container { position: relative; z-index: 2; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.hero-copy { max-width: 620px; }
.hero h1 { color: #fff; margin-bottom: 1.1rem; }
.hero-sub { font-size: clamp(1rem, 1.5vw, 1.15rem); color: var(--text-on-dark); margin-bottom: 1.75rem; max-width: 34rem; }
.hero-tags { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.9rem; }
.hero-tag {
display: inline-flex; align-items: center; gap: .4rem;
padding: .4rem .85rem; border-radius: var(--radius-pill);
background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18);
font-size: .85rem; font-weight: 600; color: #fff;
}
.hero-tag svg { width: 15px; height: 15px; }
.hero-visual { position: relative; }
.hero-visual .media-frame { aspect-ratio: 4 / 3; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); }
.hero-badge {
position: absolute; right: -0.75rem; bottom: -0.9rem; z-index: 3;
display: flex; align-items: center; gap: .6rem;
background: #fff; color: var(--text-strong);
padding: .7rem 1rem; border-radius: var(--radius-md); box-shadow: var(--shadow-md);
font-weight: 700; font-size: .85rem;
}
.hero-badge svg { width: 26px; height: 26px; color: var(--brand-primary); }
.page-hero {
position: relative; overflow: hidden;
padding-top: calc(var(--header-h) + clamp(2.25rem, 5vw, 3.5rem));
padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
background: var(--bg-navy); color: var(--text-on-dark); text-align: center;
}
.page-hero::before {
content: ""; position: absolute; inset: 0;
background:
radial-gradient(circle at 82% 0%, rgba(59, 143, 240, .4), transparent 48%),
linear-gradient(150deg, #0B1046 0%, #141C9E 100%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: .65rem; }
.page-hero p { color: var(--text-on-dark-soft); max-width: 44rem; margin-inline: auto; }
/* Compact inner hero with breadcrumb + optional visual */
.detail-hero { text-align: left; }
.detail-hero .container { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.detail-hero .page-hero-copy { max-width: 620px; }
/* The second item the audit opened was `.detail-hero h1` at zh 62.39 / en 62.39 / es 124.78 (1440) —
again an element-HEIGHT delta (+62.4px = exactly one line-height of 62.4px), NOT horizontal
overflow: measured with the shipped font, es "Bolsa Doypack con Boquilla" needs 686.69px of
single-line advance inside a 598.39px column (natOver +88.3px), so it wraps at a space and nothing
overflows its box (`scrollWidth - clientWidth` = 0). It is 2 lines for every width 1030..1440 and
one line below 1030; en needs 564.25px and fits with 34.14px to spare.
`overflow-wrap: break-word` is added as hardening only — it guarantees no FUTURE copy can push a
single unbreakable token past the column, which is the failure mode being guarded against. It does
not change today's line count, and neither does `hyphens: auto` (both measured: es stays 2 lines /
124.78px, en stays 1 line / 62.39px — the phrase is too long for the column, so no intra-word break
can help). Making es one line at >=1030px would need the shared h1 type scale to drop ~13% (52px ->
~45px, affecting every page) or the copy column to widen ~15% (shrinking the hero image). Both are
design decisions, not geometry bugs, so they are reported rather than taken. */
.detail-hero h1 { margin-bottom: .75rem; overflow-wrap: break-word; }
.detail-hero .hero-sub { color: var(--text-on-dark); }
.detail-hero .media-frame { aspect-ratio: 1 / 1; box-shadow: var(--shadow-lg); border-radius: var(--radius-lg); }
.detail-hero .media-frame img { object-fit: contain; }
/* ===== 10. Home sections ===== */
.stats {
background: var(--bg-navy-2);
border-top: 1px solid rgba(255, 255, 255, .08);
padding-block: clamp(2.5rem, 5vw, 3.75rem);
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); text-align: center; }
.stat { display: flex; flex-direction: column; justify-content: center; padding-inline: .5rem; }
.stat-value { font-size: clamp(2.1rem, 4.5vw, 3.1rem); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -.02em; }
.stat-value .stat-suffix { color: var(--brand-light); }
.stat-label { margin-top: 1rem; font-size: .95rem; font-weight: 600; line-height: 1.5; color: var(--text-on-dark-soft); }
.stat + .stat { border-left: 1px solid rgba(255, 255, 255, .1); }
/* Advantages */
.feature-card {
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
padding: 1.75rem; height: 100%;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; }
.feature-icon {
display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 15px;
background: var(--brand-gradient); color: #fff; margin-bottom: 1.1rem; box-shadow: var(--shadow-sm);
/* `flex: 0 0 auto` keeps the chip square. Without it the default `flex-shrink: 1` lets a
long sibling text block squeeze it — the 46px chip collapsed to 30.9px in EN and 22px at
390px, because the English address needs two lines where the Chinese one needs one. */
flex: 0 0 auto;
}
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.feature-card p { color: var(--text-soft); font-size: .95rem; margin: 0; }
/* Products */
.product-card {
display: flex; flex-direction: column;
background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
overflow: hidden; height: 100%;
transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.product-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: transparent; }
/* Square frame + `contain`: the product photos are portrait (4:5) or square, so a wide
16:11 box with `cover` used to chop 25–45% off every image. A square box shows them whole
and keeps every card the same height; the blurred fill behind covers the leftover edges. */
.product-card .media-frame { border-radius: 0; aspect-ratio: 1 / 1; }
.product-card .media-frame img { object-fit: contain; }
.product-card-body { padding: 1.35rem 1.5rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
.product-card h3 { font-size: 1.15rem; margin-bottom: .35rem; }
.product-card .product-en { display: block; font-size: .82rem; font-weight: 600; color: var(--brand-light); letter-spacing: .02em; margin-bottom: .65rem; }
/* The English trade name is only meaningful alongside the Chinese name; in en/es it just repeats the