/* ───────────────────────────────────────────────────────────────────── Wholesome Paper · Li-Xing Paper Industry Co., Ltd. Industrial B2B identity, restrained palette, real-photo-ready. ───────────────────────────────────────────────────────────────────── */ :root { --ink: #14110f; --ink-soft: #4a443e; --paper: #f5f1ea; --paper-deep: #ece5d7; --brick: #8a2820; --forest: #2d4a3e; --brass: #a88b5c; --brass-ink: #76603a; /* brass for text: 5.3:1 on paper, 4.8:1 on paper-deep */ --steel: #c7c0b5; /* Chinese faces are Noto Sans / Noto Serif, self-hosted as subsets of only the characters the site uses (tools/regen-fonts.py). Each language gets its own subset (below); system CJK fonts are the fallback for anything missing. */ --cjk-serif-face: "WP Serif Mark", "Noto Serif CJK TC", "Songti TC"; --cjk-sans-face: "WP Sans Mark", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC"; --serif: "Fraunces", "Source Serif 4", var(--cjk-serif-face), Georgia, serif; --sans: "IBM Plex Sans", var(--cjk-sans-face), system-ui, sans-serif; --mono: "IBM Plex Mono", var(--cjk-sans-face), ui-monospace, "SFMono-Regular", monospace; --cjk-serif: var(--cjk-serif-face), "Fraunces", "Source Serif 4", Georgia, serif; --cjk-sans: var(--cjk-sans-face), "IBM Plex Sans", system-ui, sans-serif; --container: 1280px; --gutter: clamp(1.25rem, 4vw, 4rem); --rule: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); --rule-strong: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); --rule-brass: 1px solid color-mix(in srgb, var(--brass) 60%, transparent); } html:lang(zh-Hant) { --cjk-serif-face: "WP Serif TC", "Noto Serif CJK TC", "Songti TC"; --cjk-sans-face: "WP Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC"; } html:lang(zh-Hans) { --cjk-serif-face: "WP Serif SC", "Noto Serif CJK SC", "Songti SC"; --cjk-sans-face: "WP Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC"; } /* fonts:begin · generated by tools/regen-fonts.py, do not edit · Noto Sans/Serif TC/SC, SIL Open Font License */ @font-face { font-family: "WP Sans TC"; font-weight: 400; font-display: swap; src: url("assets/fonts/sans-tc-400-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Sans TC"; font-weight: 400; font-display: swap; src: url("assets/fonts/sans-tc-400-0.woff2") format("woff2"); unicode-range: U+3001-8207; } @font-face { font-family: "WP Sans TC"; font-weight: 400; font-display: swap; src: url("assets/fonts/sans-tc-400-1.woff2") format("woff2"); unicode-range: U+8208-FF5C; } @font-face { font-family: "WP Sans TC"; font-weight: 500; font-display: swap; src: url("assets/fonts/sans-tc-500-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Sans TC"; font-weight: 500; font-display: swap; src: url("assets/fonts/sans-tc-500-0.woff2") format("woff2"); unicode-range: U+3001-8207; } @font-face { font-family: "WP Sans TC"; font-weight: 500; font-display: swap; src: url("assets/fonts/sans-tc-500-1.woff2") format("woff2"); unicode-range: U+8208-FF5C; } @font-face { font-family: "WP Sans TC"; font-weight: 700; font-display: swap; src: url("assets/fonts/sans-tc-700-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Sans TC"; font-weight: 700; font-display: swap; src: url("assets/fonts/sans-tc-700-0.woff2") format("woff2"); unicode-range: U+3001-8207; } @font-face { font-family: "WP Sans TC"; font-weight: 700; font-display: swap; src: url("assets/fonts/sans-tc-700-1.woff2") format("woff2"); unicode-range: U+8208-FF5C; } @font-face { font-family: "WP Serif TC"; font-weight: 500; font-display: swap; src: url("assets/fonts/serif-tc-500-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Serif TC"; font-weight: 500; font-display: swap; src: url("assets/fonts/serif-tc-500-0.woff2") format("woff2"); unicode-range: U+3001-8207; } @font-face { font-family: "WP Serif TC"; font-weight: 500; font-display: swap; src: url("assets/fonts/serif-tc-500-1.woff2") format("woff2"); unicode-range: U+8208-FF5C; } @font-face { font-family: "WP Serif TC"; font-weight: 700; font-display: swap; src: url("assets/fonts/serif-tc-700-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Serif TC"; font-weight: 700; font-display: swap; src: url("assets/fonts/serif-tc-700-0.woff2") format("woff2"); unicode-range: U+3001-8207; } @font-face { font-family: "WP Serif TC"; font-weight: 700; font-display: swap; src: url("assets/fonts/serif-tc-700-1.woff2") format("woff2"); unicode-range: U+8208-FF5C; } @font-face { font-family: "WP Sans SC"; font-weight: 400; font-display: swap; src: url("assets/fonts/sans-sc-400-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Sans SC"; font-weight: 400; font-display: swap; src: url("assets/fonts/sans-sc-400-0.woff2") format("woff2"); unicode-range: U+3001-7EDC; } @font-face { font-family: "WP Sans SC"; font-weight: 400; font-display: swap; src: url("assets/fonts/sans-sc-400-1.woff2") format("woff2"); unicode-range: U+7EDF-FF5C; } @font-face { font-family: "WP Sans SC"; font-weight: 500; font-display: swap; src: url("assets/fonts/sans-sc-500-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Sans SC"; font-weight: 500; font-display: swap; src: url("assets/fonts/sans-sc-500-0.woff2") format("woff2"); unicode-range: U+3001-7EDC; } @font-face { font-family: "WP Sans SC"; font-weight: 500; font-display: swap; src: url("assets/fonts/sans-sc-500-1.woff2") format("woff2"); unicode-range: U+7EDF-FF5C; } @font-face { font-family: "WP Sans SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/sans-sc-700-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Sans SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/sans-sc-700-0.woff2") format("woff2"); unicode-range: U+3001-7EDC; } @font-face { font-family: "WP Sans SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/sans-sc-700-1.woff2") format("woff2"); unicode-range: U+7EDF-FF5C; } @font-face { font-family: "WP Serif SC"; font-weight: 500; font-display: swap; src: url("assets/fonts/serif-sc-500-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Serif SC"; font-weight: 500; font-display: swap; src: url("assets/fonts/serif-sc-500-0.woff2") format("woff2"); unicode-range: U+3001-7EDC; } @font-face { font-family: "WP Serif SC"; font-weight: 500; font-display: swap; src: url("assets/fonts/serif-sc-500-1.woff2") format("woff2"); unicode-range: U+7EDF-FF5C; } @font-face { font-family: "WP Serif SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/serif-sc-700-latin.woff2") format("woff2"); unicode-range: U+20-7E, U+A0, U+A9, U+AE, U+B0, U+B2-B3, U+B7, U+BD, U+D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+2190-2193; } @font-face { font-family: "WP Serif SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/serif-sc-700-0.woff2") format("woff2"); unicode-range: U+3001-7EDC; } @font-face { font-family: "WP Serif SC"; font-weight: 700; font-display: swap; src: url("assets/fonts/serif-sc-700-1.woff2") format("woff2"); unicode-range: U+7EDF-FF5C; } @font-face { font-family: "WP Sans Mark"; font-weight: 400; font-display: swap; src: url("assets/fonts/sans-mark-400-0.woff2") format("woff2"); unicode-range: U+4E2D-9AD4; } @font-face { font-family: "WP Sans Mark"; font-weight: 500; font-display: swap; src: url("assets/fonts/sans-mark-500-0.woff2") format("woff2"); unicode-range: U+4E2D-9AD4; } @font-face { font-family: "WP Serif Mark"; font-weight: 500; font-display: swap; src: url("assets/fonts/serif-mark-500-0.woff2") format("woff2"); unicode-range: U+4E2D-9AD4; } @font-face { font-family: "WP Serif Mark"; font-weight: 700; font-display: swap; src: url("assets/fonts/serif-mark-700-0.woff2") format("woff2"); unicode-range: U+4E2D-9AD4; } /* fonts:end */ /* RESET ─────────────────────────────────────────────────────────────── */ /* Keyboard focus on links and buttons is always visible (several had none). Mouse clicks on them don't match :focus-visible, so nothing changes for mouse users. Form fields keep their own focus styles, defined with each field. */ :where(a, button, summary, [role="button"]):focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; } main:focus { outline: none; } .skip-link { position: absolute; left: 1rem; top: -200px; z-index: 1100; padding: 0.75rem 1rem; background: var(--ink); color: var(--paper); font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; } .skip-link:focus { top: 0.75rem; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg { display: block; max-width: 100%; } button { font: inherit; cursor: pointer; border: 0; background: transparent; color: inherit; } input, select, textarea { font: inherit; color: inherit; } ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } sup { font-size: 0.6em; vertical-align: super; } address { font-style: normal; } /* PAGE ──────────────────────────────────────────────────────────────── */ html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { font-family: var(--sans); font-weight: 400; font-size: 16px; line-height: 1.55; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Paper grain · fixed, multiply blend, ~25% opacity */ body::before { content: ""; position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.25; mix-blend-mode: multiply; background-image: url("data:image/svg+xml;utf8,"); } ::selection { background: var(--ink); color: var(--paper); } .container { width: 100%; max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); } /* Languages Two regimes: 1. Inline CJK fragments embedded inside an English page (e.g. middle-dot section titles). 2. A fully Chinese page, Traditional or Simplified (html:lang(zh)) · see "TC PAGE" block below. */ :not(html)[lang="zh-Hant"] { font-family: var(--cjk-sans); letter-spacing: 0.04em; } [lang="en"] { font-feature-settings: "ss01"; } /* Placeholder text token */ .placeholder-token { font-family: var(--mono); font-size: 0.92em; letter-spacing: 0.02em; color: var(--ink-soft); background: color-mix(in srgb, var(--brass) 14%, transparent); padding: 0.05em 0.4em; border-radius: 1px; white-space: nowrap; } /* IMAGE PLACEHOLDERS ────────────────────────────────────────────────── */ .img-placeholder { position: relative; width: 100%; background: var(--steel); background-image: repeating-linear-gradient( 135deg, transparent 0, transparent 11px, color-mix(in srgb, #fff 22%, transparent) 11px, color-mix(in srgb, #fff 22%, transparent) 12px ); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.5rem; color: var(--ink); overflow: hidden; isolation: isolate; } .img-placeholder[data-aspect="16/9"] { aspect-ratio: 16 / 9; } .img-placeholder[data-aspect="4/3"] { aspect-ratio: 4 / 3; } .img-placeholder[data-aspect="1/1"] { aspect-ratio: 1 / 1; } .img-placeholder[data-aspect="fill"] { aspect-ratio: auto; height: 100%; min-height: 480px; } .img-placeholder .ph-tag { position: absolute; top: 12px; left: 14px; font-family: var(--mono); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink); background: color-mix(in srgb, var(--paper) 80%, transparent); padding: 4px 8px; border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); } .img-placeholder .ph-spec { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink); max-width: 32ch; line-height: 1.5; background: color-mix(in srgb, var(--paper) 70%, transparent); padding: 0.4em 0.8em; } .img-placeholder .ph-note { position: absolute; bottom: 12px; left: 14px; right: 14px; text-align: left; font-family: var(--mono); font-style: italic; font-size: 10.5px; letter-spacing: 0.02em; color: color-mix(in srgb, var(--ink) 75%, transparent); } .img-placeholder.cert { background-image: repeating-linear-gradient(135deg, transparent 0, transparent 9px, color-mix(in srgb, #fff 26%, transparent) 9px, color-mix(in srgb, #fff 26%, transparent) 10px); } .img-placeholder.portrait { background-image: repeating-linear-gradient(135deg, transparent 0, transparent 13px, color-mix(in srgb, #fff 18%, transparent) 13px, color-mix(in srgb, #fff 18%, transparent) 14px); } /* TYPOGRAPHY ────────────────────────────────────────────────────────── */ .eyebrow, .section-eyebrow, .pedigree-eyebrow, .footer-eyebrow, .contact-role, .field-label { font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); } .display-xl, .section-title, .brand-h, .quote-h { font-family: var(--serif); font-weight: 500; letter-spacing: -0.012em; color: var(--ink); } .display-xl { font-size: clamp(2.6rem, 5.6vw, 5rem); line-height: 1.02; font-weight: 500; font-variation-settings: "opsz" 144, "SOFT" 30; margin: 0.4em 0 0.45em; } .section-title { font-size: clamp(1.85rem, 3.2vw, 2.75rem); line-height: 1.1; font-weight: 500; font-variation-settings: "opsz" 96; margin: 0.3em 0 0.4em; /* 這裡原本是 flex。全站沒有任何 .section-title 帶子元素，flex 不但沒作用， 還會把文字包成匿名 flex item，讓 text-wrap: balance 失效——中文標題 因此掉出「嗎？」這種孤字行。改回 block。 */ display: block; } .title-dot { color: var(--brass); margin: 0 0.1ch; font-weight: 400; } /* SECTION SCAFFOLDING ───────────────────────────────────────────────── */ .section { padding-block: clamp(4.5rem, 9vw, 8rem); border-top: var(--rule); } .section--alt { background: var(--paper-deep); } .section-head { max-width: 56ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .section-lede { color: var(--ink-soft); font-size: 1.0625rem; margin: 0; max-width: 60ch; } /* TOP BAR ───────────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: var(--rule-brass); } .topbar-inner { max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); height: 64px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2rem; } /* Section nav · quiet mono caps, centred between brand and meta */ .topbar-nav { justify-self: center; } .topbar-nav ul { display: flex; /* Capped against the container (max 1280px), not the viewport: a vw-based gap keeps growing past that cap and pushes the nav into a second line on large monitors. */ gap: clamp(0.85rem, 1.4vw, 1.5rem); flex-wrap: nowrap; } .topbar-nav a { display: inline-block; white-space: nowrap; padding: 6px 0; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.13em; color: var(--ink-soft); border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; } .topbar-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); } html:lang(zh) .topbar-nav a { font-family: var(--cjk-sans); font-size: 13px; letter-spacing: 0.16em; text-transform: none; font-weight: 500; } /* Anchor offset to clear the sticky topbar */ section[id] { scroll-margin-top: 88px; } .brand { display: inline-flex; align-items: center; gap: 14px; flex: none; } .brand-glyph { display: inline-grid; place-items: center; width: 34px; height: 34px; font-family: var(--cjk-serif); font-size: 22px; line-height: 1; color: var(--paper); background: var(--ink); border: 1px solid var(--ink); letter-spacing: 0; } .brand-glyph.small { width: 30px; height: 30px; font-size: 19px; } .brand-name { display: flex; flex-direction: column; line-height: 1.05; } .brand-name-primary { font-family: var(--serif); font-weight: 600; font-size: 17px; letter-spacing: -0.005em; } .brand-name-secondary { font-family: var(--cjk-serif); font-size: 11px; letter-spacing: 0.18em; color: var(--ink-soft); margin-top: 2px; } /* On the TC page the prominence flips: TC primary, EN secondary in mono caps */ html:lang(zh) .brand-name-primary { font-family: var(--cjk-serif); letter-spacing: 0.06em; font-size: 18px; font-weight: 700; } html:lang(zh) .brand-name-secondary { font-family: var(--mono); letter-spacing: 0.18em; font-size: 9.5px; text-transform: uppercase; font-weight: 500; } .topbar-meta { display: flex; align-items: center; gap: 1.25rem; flex: none; } .established { white-space: nowrap; font-family: var(--mono); font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); } .topbar-divider { width: 1px; height: 18px; background: color-mix(in srgb, var(--ink) 18%, transparent); } .lang-switch { display: flex; align-items: center; gap: 0.65rem; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.14em; } .lang { color: var(--ink-soft); padding-bottom: 2px; white-space: nowrap; } .lang.is-active { color: var(--ink); border-bottom: 2px solid var(--brick); } .lang:not(.is-active):hover { color: var(--ink); } /* HERO ──────────────────────────────────────────────────────────────── */ .hero { border-bottom: var(--rule); overflow: hidden; } .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; min-height: 80vh; } .hero-text { padding-block: clamp(4rem, 8vw, 7rem); padding-inline: clamp(1.5rem, 5vw, 5rem) clamp(2rem, 5vw, 5rem); display: flex; flex-direction: column; justify-content: center; max-width: 720px; justify-self: end; width: 100%; } .hero-image { position: relative; display: flex; align-items: stretch; background: var(--ink); } .hero-image .img-placeholder, .hero-image .photo { height: 100%; min-height: 100%; border: 0; width: 100%; } .eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--mono); font-size: 11.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); margin: 0; } .eyebrow-mark { display: inline-block; width: 22px; height: 2px; background: var(--brick); } /* Keeps a name like "Li-Xing Paper" on one line */ .nw { white-space: nowrap; } .hero-sub { font-size: 1.1rem; line-height: 1.55; color: var(--ink-soft); max-width: 56ch; margin: 0 0 2.6rem; } /* Hero stats */ .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 2rem 3rem; margin: 0; padding-top: 1.75rem; border-top: var(--rule-strong); } .hero-stat { display: flex; flex-direction: column; gap: 0.4rem; } .hero-stat-label { font-family: var(--mono); font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); order: 2; } .hero-stat-value { font-family: var(--mono); font-size: clamp(2rem, 3vw, 2.6rem); font-weight: 500; line-height: 1; color: var(--ink); margin: 0; order: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .num-suffix { font-family: var(--mono); font-size: 0.55em; color: var(--ink-soft); margin-left: 0.15em; font-weight: 400; vertical-align: 0.4em; } /* PEDIGREE BAND ─────────────────────────────────────────────────────── */ .pedigree { background: var(--ink); color: var(--paper); border-block: 1px solid var(--ink); } .pedigree-inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding-block: clamp(2rem, 4vw, 3rem); } .pedigree-eyebrow { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; color: color-mix(in srgb, var(--paper) 55%, transparent); margin: 0 0 0.5rem; } .pedigree-co { display: flex; flex-direction: column; gap: 0.2rem; margin: 0; } .pedigree-zh { font-family: var(--cjk-serif); font-weight: 500; font-size: 1.6rem; letter-spacing: 0.08em; color: var(--paper); } .pedigree-en { white-space: nowrap; font-family: var(--serif); font-weight: 500; font-size: 1.05rem; color: color-mix(in srgb, var(--paper) 75%, transparent); } .pedigree-claim { font-family: var(--serif); font-style: italic; font-size: 1.0625rem; line-height: 1.45; color: color-mix(in srgb, var(--paper) 72%, transparent); max-width: 38ch; margin: 0; border-left: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); padding-left: 1.5rem; } .pedigree-marks { display: flex; gap: 1.5rem; } .pedigree-marks li { display: flex; flex-direction: column; align-items: center; gap: 0.6rem; } .pedigree-marks .img-placeholder { width: 84px; background: color-mix(in srgb, var(--paper) 92%, transparent); } .pedigree-marks .img-placeholder .ph-spec, .pedigree-marks .img-placeholder .ph-note { display: none; } .pedigree-marks .img-placeholder .ph-tag { position: static; background: transparent; border: 0; padding: 0; font-size: 9px; } /* Certificates as text until the mill sends logo files and the FSC licence code */ .pedigree-marks--text { flex-direction: column; gap: 0.9rem; } .pedigree-marks--text li { align-items: flex-start; } .pedigree-marks--text .cert-caption { text-align: left; line-height: 1.7; } .cert-caption { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: color-mix(in srgb, var(--paper) 70%, transparent); margin: 0; text-align: center; } /* CAPABILITIES ──────────────────────────────────────────────────────── */ .cap-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 2.25rem); } .cap-card { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 0.5rem; } .cap-card .img-placeholder { transition: filter 360ms ease, transform 480ms cubic-bezier(.2,.7,.2,1); } .cap-card:hover .img-placeholder { filter: contrast(1.08) saturate(1.05); } .cap-title { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 0.4rem 0 0; letter-spacing: -0.005em; } .cap-desc { color: var(--ink-soft); font-size: 0.95rem; margin: 0; line-height: 1.55; } .cap-specs { margin-top: 0.5rem; border-top: var(--rule); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; max-height: 0; overflow: hidden; opacity: 0.75; transition: max-height 420ms ease, opacity 360ms ease, margin 360ms ease; } /* Reveal specs progressively, but show always on small screens for accessibility */ .cap-card .cap-specs { max-height: 9rem; opacity: 0.85; } .cap-card:hover .cap-specs, .cap-card:focus-within .cap-specs { opacity: 1; } .cap-specs li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: var(--rule); color: var(--ink); } .cap-specs li span:first-child { text-transform: uppercase; letter-spacing: 0.16em; color: var(--ink-soft); } .cap-specs li span:last-child { font-weight: 500; } /* MANUFACTURING ─────────────────────────────────────────────────────── */ .mfg-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .mfg-text p:not(.section-eyebrow) { color: var(--ink-soft); font-size: 1.05rem; margin: 0 0 1.2rem; max-width: 52ch; } .mfg-quote { margin: 2rem 0 0; padding: 1.5rem 0 0; border-top: 2px solid var(--brick); font-family: var(--serif); font-style: italic; font-size: 1.25rem; line-height: 1.45; color: var(--ink); position: relative; max-width: 44ch; } .mfg-quote-mark { position: absolute; left: -0.4ch; top: 0.6rem; font-size: 3.5rem; line-height: 0; color: var(--brick); font-family: var(--serif); } .mfg-quote-cite { display: block; font-family: var(--mono); font-style: normal; font-size: 11px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--ink-soft); margin-top: 1rem; } .mfg-images { display: grid; gap: clamp(1rem, 2vw, 1.5rem); } .mfg-images > :first-child { transform: translateY(2rem); } /* SUB-BLOCK HEADING ────────────────────────────────────────────────── Used inside merged sections (e.g. Manufacturing → numbers, Australia → distribution partners) to introduce a sub-section without taking on a numbered top-level heading. */ .sub-head { margin-top: clamp(3rem, 6vw, 5rem); margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: var(--rule-strong); } .sub-eyebrow { font-family: var(--mono); font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.22em; font-weight: 500; color: var(--ink); margin: 0; } .sub-eyebrow [lang="zh-Hant"] { font-family: var(--cjk-sans); font-size: 0.95em; letter-spacing: 0.16em; text-transform: none; color: var(--ink-soft); font-weight: 500; } html:lang(zh) .sub-eyebrow { font-family: var(--cjk-sans); font-size: 13.5px; letter-spacing: 0.16em; text-transform: none; } html:lang(zh) .sub-eyebrow [lang="en"] { font-family: var(--mono); font-size: 0.78em; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } /* BY THE NUMBERS (now embedded inside Manufacturing) ─────────────────── */ .mfg-numbers { /* sibling of .container.mfg-grid; container itself supplies layout */ } .numbers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--rule-strong); border-left: var(--rule-strong); } .stat { padding: clamp(1.5rem, 3vw, 2.5rem); border-right: var(--rule-strong); border-bottom: var(--rule-strong); display: flex; flex-direction: column; gap: 0.6rem; position: relative; } .stat-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); } .stat-value { font-family: var(--mono); font-weight: 500; font-size: clamp(2.6rem, 5.2vw, 4.4rem); line-height: 1; letter-spacing: -0.02em; color: var(--ink); margin: 0.1rem 0 0.3rem; font-variant-numeric: tabular-nums; } .stat-value .num-suffix { font-size: 0.4em; vertical-align: 0.6em; } .stat-note { margin: 0; font-size: 0.92rem; color: var(--ink-soft); max-width: 32ch; } /* BRANDS ────────────────────────────────────────────────────────────── */ .brands-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 4vw, 4rem); align-items: stretch; } .brand-card { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); } .brand-card--owned { grid-template-rows: auto 1fr; } .brand-card--oem { grid-template-rows: 1fr auto; } .brand-card-body { display: flex; flex-direction: column; gap: 0.85rem; } .brand-mark { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); margin: 0; } .brand-card--owned .brand-mark { color: var(--brick); } .brand-h { font-size: clamp(1.4rem, 2vw, 1.75rem); line-height: 1.2; margin: 0; font-weight: 500; } .brand-desc { margin: 0; color: var(--ink-soft); max-width: 52ch; } .brand-points { margin-top: 0.5rem; border-top: var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; } .brand-points li { padding: 0.7rem 0; border-bottom: var(--rule); color: var(--ink); display: flex; gap: 0.75rem; } .brand-points li::before { content: "·"; color: var(--brass); font-weight: 700; margin-right: 0.4em; } /* EXPORT REACH ──────────────────────────────────────────────────────── */ .reach-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 5rem); align-items: start; } .reach-text p { color: var(--ink-soft); font-size: 1.05rem; max-width: 50ch; margin: 0 0 1.5rem; } .reach-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: var(--rule-strong); font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; } .reach-list li { display: flex; flex-direction: column; gap: 0.3rem; padding: 1rem 0.5rem 1rem 1.6rem; border-bottom: var(--rule); position: relative; } .reach-list li::before { content: ""; position: absolute; left: 0.25rem; top: 1.45rem; width: 6px; height: 6px; background: var(--brick); border-radius: 50%; } .reach-country { font-family: var(--serif); font-weight: 500; font-size: 1.25rem; letter-spacing: -0.005em; color: var(--ink); text-transform: none; } .reach-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } html:lang(zh) .reach-country { font-family: var(--cjk-serif); letter-spacing: 0.06em; font-weight: 700; } /* CONTACT ───────────────────────────────────────────────────────────── */ .contact { background: var(--paper-deep); padding-block: clamp(5rem, 9vw, 8rem); border-top: var(--rule); } .contact-head { max-width: 60ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .contact-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 2.5rem); margin-bottom: clamp(3rem, 6vw, 5rem); } .contact-card { background: var(--paper); padding: 1.75rem; border: var(--rule-strong); display: flex; flex-direction: column; gap: 0.85rem; } /* Single-contact variant: one card centred, photo left, details right */ .contact-cards--single { grid-template-columns: 1fr; max-width: 760px; margin-inline: auto; } .contact-cards--single .contact-card { display: grid; grid-template-columns: 160px 1fr; gap: clamp(1.5rem, 3vw, 2.25rem); align-items: start; padding: clamp(1.75rem, 3vw, 2.25rem); } .contact-cards--single .contact-card .img-placeholder { width: 100%; height: auto; margin-bottom: 0; } .contact-cards--single .contact-card-body { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } .contact-cards--single .contact-name { font-size: 1.45rem; margin-bottom: 0.35rem; } .contact-cards--single .contact-list a { color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); padding-bottom: 1px; transition: color 180ms ease, border-color 180ms ease; } .contact-cards--single .contact-list a:hover { color: var(--brick); border-color: var(--brick); } .contact-card .img-placeholder { width: 72px; height: 72px; border-radius: 0; margin-bottom: 0.4rem; } .contact-card .img-placeholder .ph-spec, .contact-card .img-placeholder .ph-note { display: none; } .contact-card .img-placeholder .ph-tag { position: static; background: transparent; border: 0; padding: 0; font-size: 9px; } .contact-role { margin: 0; } .contact-name { font-family: var(--serif); font-weight: 600; font-size: 1.2rem; margin: 0; background: transparent; padding: 0; color: var(--ink); white-space: normal; } .contact-list { display: flex; flex-direction: column; gap: 0; margin: 0.4rem 0 0; border-top: var(--rule); font-family: var(--mono); font-size: 12.5px; } .contact-list > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.5rem; padding: 0.6rem 0; border-bottom: var(--rule); } .contact-list dt { text-transform: uppercase; letter-spacing: 0.16em; font-size: 10.5px; color: var(--ink-soft); align-self: center; } /* A long address (poanchien@wholesomepaper.com.au) has no break opportunity and forced the whole page to scroll sideways on a 320px phone. */ .contact-list dd { margin: 0; color: var(--ink); min-width: 0; overflow-wrap: anywhere; } /* Quote form */ .quote-form { border-top: var(--rule-strong); padding-top: clamp(2rem, 4vw, 3rem); } .quote-h { font-size: clamp(1.4rem, 2.4vw, 1.85rem); font-weight: 500; margin: 0 0 1.75rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.4ch; } .quote-h [lang="zh-Hant"] { font-family: var(--cjk-serif); font-size: 0.78em; color: var(--ink-soft); letter-spacing: 0.1em; } .quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem); } .field { display: flex; flex-direction: column; gap: 0.5rem; } .field--full { grid-column: 1 / -1; } .field-label { font-size: 10.5px; letter-spacing: 0.22em; } .field input, .field select, .field textarea { width: 100%; background: transparent; border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 50%, transparent); padding: 0.55rem 0; font-family: var(--sans); font-size: 1rem; color: var(--ink); border-radius: 0; outline: none; transition: border-color 200ms ease; resize: vertical; } .field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 12px) 60%, calc(100% - 6px) 60%; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; padding-right: 1.5rem; } .field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--brick); box-shadow: 0 1px 0 0 var(--brick); } .quote-submit { margin-top: 2rem; display: inline-flex; align-items: baseline; gap: 0.75rem; padding: 0.9rem 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); transition: color 200ms ease, border-color 200ms ease, gap 200ms ease; } .quote-submit:hover { color: var(--brick); border-color: var(--brick); gap: 1.1rem; } .quote-arrow { font-family: var(--serif); font-size: 1.1rem; } /* Inline confirmation after an enquiry is sent, or the fallback if sending failed */ .quote-status { margin: 1.25rem 0 0; padding: 0.85rem 1rem; background: color-mix(in srgb, var(--forest) 8%, transparent); border-left: 2px solid var(--forest); font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: 0.02em; color: var(--ink); max-width: 64ch; } .quote-status a { color: var(--forest); border-bottom: 1px solid color-mix(in srgb, var(--forest) 50%, transparent); } .quote-status a:hover { color: var(--brick); border-color: var(--brick); } html:lang(zh) .quote-status { font-family: var(--cjk-sans); font-size: 13px; letter-spacing: 0.02em; } .quote-status:empty { display: none; } .quote-status:focus { outline: none; } .quote-status.is-error { background: color-mix(in srgb, var(--brick) 7%, transparent); border-left-color: var(--brick); } .quote-submit:disabled { opacity: 0.55; cursor: progress; } /* Sent: the confirmation replaces the fields */ .quote-form.is-sent .quote-grid, .quote-form.is-sent .quote-submit { display: none; } /* FOOTER ────────────────────────────────────────────────────────────── */ .footer { background: var(--ink); color: color-mix(in srgb, var(--paper) 78%, transparent); padding-top: clamp(3rem, 6vw, 5rem); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 0.9fr; gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(2.5rem, 4vw, 3.5rem); border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); } .footer-brand { display: flex; align-items: flex-start; gap: 12px; } .footer-brand .brand-glyph { background: transparent; color: var(--paper); border-color: color-mix(in srgb, var(--paper) 30%, transparent); } .footer-co { margin: 0; font-family: var(--serif); font-size: 0.95rem; line-height: 1.5; color: var(--paper); } .footer-co [lang="zh-Hant"] { font-family: var(--cjk-serif); font-weight: 500; } .footer-eyebrow { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; color: color-mix(in srgb, var(--paper) 50%, transparent); margin: 0 0 0.85rem; } .footer-addr address { font-family: var(--mono); font-size: 12px; line-height: 1.7; color: color-mix(in srgb, var(--paper) 75%, transparent); } .footer-marks ul { font-family: var(--mono); font-size: 12px; line-height: 1.9; color: color-mix(in srgb, var(--paper) 75%, transparent); } .footer-base { display: flex; align-items: center; justify-content: space-between; padding-block: 1.5rem 2rem; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.06em; color: color-mix(in srgb, var(--paper) 55%, transparent); } .footer-base-meta { display: flex; gap: 0.7rem; align-items: center; } .footer-base a:hover { color: var(--paper); } /* MOTION ────────────────────────────────────────────────────────────── */ /* The hero ([data-rise], [data-fade-image]) is shown as-is, with no entrance animation. It used to start at opacity 0 and wait for script.js (blank hero on slow connections, never shown if JS failed); a CSS-only fade was tried too, but in throttled tabs its start can stall and leave the headline invisible. The hero is the first thing anyone sees: it must just be there. */ [data-fade-image] { background: #000; position: relative; } /* The hero photo is the LCP element: show it as soon as it decodes, no fade. */ .js .hero .photo img { opacity: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; } } /* CATALOGUE ─────────────────────────────────────────────────────────── */ .cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 2.4vw, 2.25rem); } .cat-card { display: flex; flex-direction: column; gap: 0.65rem; padding-bottom: 1.5rem; border-bottom: var(--rule-strong); } .cat-card .img-placeholder, .cat-card .photo { margin-bottom: 0.5rem; } .cat-meta { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.2rem 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; } .cat-sku { color: var(--ink); font-weight: 600; } .cat-stock { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 10.5px; letter-spacing: 0.14em; color: var(--ink-soft); text-transform: none; } .cat-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--steel); } .cat-stock--ready .cat-dot { background: var(--forest); box-shadow: 0 0 0 3px color-mix(in srgb, var(--forest) 18%, transparent); } .cat-stock--lead .cat-dot { background: var(--brass); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brass) 18%, transparent); } .cat-stock--ready { color: var(--forest); } .cat-stock--lead { color: color-mix(in srgb, var(--brass) 70%, var(--ink)); } .cat-name { font-family: var(--serif); font-weight: 600; font-size: 1.15rem; line-height: 1.2; margin: 0.1rem 0 0; } .cat-spec { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); margin: 0; } .cat-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.4rem 0 0; padding-top: 0.75rem; border-top: var(--rule); } .cat-price-amount { font-family: var(--mono); font-weight: 500; font-size: 1.5rem; letter-spacing: -0.005em; color: var(--ink); font-variant-numeric: tabular-nums; } .cat-price-unit { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .cat-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.5rem; flex-wrap: wrap; } /* Quantity stepper */ .qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); background: color-mix(in srgb, var(--paper) 60%, transparent); } .qty-step { width: 32px; height: 36px; font-family: var(--mono); font-size: 16px; line-height: 1; color: var(--ink); display: inline-grid; place-items: center; transition: background 160ms ease, color 160ms ease; } .qty-step:hover { background: var(--ink); color: var(--paper); } .qty-input { width: 44px; height: 36px; text-align: center; border: 0; border-inline: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); background: transparent; font-family: var(--mono); font-size: 13px; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .qty-input::-webkit-outer-spin-button, .qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .qty-input:focus { outline: 2px solid var(--brick); outline-offset: 2px; } .cat-add { display: inline-flex; align-items: baseline; gap: 0.5rem; padding: 0.55rem 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); transition: color 200ms ease, border-color 200ms ease, gap 200ms ease; } .cat-add:not(:disabled):hover { color: var(--brick); border-color: var(--brick); gap: 0.8rem; } .cat-add:disabled { opacity: 0.4; cursor: not-allowed; } .cat-add-arrow { font-family: var(--serif); font-size: 1.05rem; line-height: 0; } .cat-card.is-just-added .cat-add { color: var(--forest); border-color: var(--forest); } .cat-foot { margin: 2rem auto 0; max-width: 62ch; text-align: center; font-size: 0.95rem; color: var(--ink-soft); } .cat-foot a { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 2px; margin-left: 0.4rem; } .cat-foot a:hover { color: var(--brick); border-color: var(--brick); } /* PARTNERS ──────────────────────────────────────────────────────────── */ .partners-prose { font-family: var(--serif); font-style: italic; font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.55; color: var(--ink); max-width: 72ch; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 1.5rem 0 0; border-top: 2px solid var(--brick); } html:lang(zh) .partners-prose { font-family: var(--cjk-serif); font-style: normal; letter-spacing: 0.04em; } .partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: var(--rule-strong); border-bottom: var(--rule-strong); margin-bottom: clamp(2rem, 4vw, 3rem); } .partners-col { padding: clamp(1.25rem, 2.5vw, 2rem) 0; } .partners-col:first-child { padding-right: clamp(1.25rem, 3vw, 2.5rem); border-right: var(--rule); } .partners-col:last-child { padding-left: clamp(1.25rem, 3vw, 2.5rem); } .partners-col-eyebrow { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); margin: 0 0 1rem; } html:lang(zh) .partners-col-eyebrow { font-family: var(--cjk-sans); letter-spacing: 0.16em; text-transform: none; font-weight: 500; font-size: 12.5px; } .partners-list { display: flex; flex-direction: column; } .partners-list li { padding: 0.7rem 0; border-bottom: var(--rule); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; line-height: 1.55; color: var(--ink); } .partners-list li:last-child { border-bottom: 0; } html:lang(zh) .partners-list li { font-family: var(--cjk-sans); font-size: 13.5px; letter-spacing: 0.04em; } .partners-cta { text-align: center; margin: 0; } .partners-cta a { display: inline-block; padding: 0.7rem 0.5rem; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); transition: color 200ms ease, border-color 200ms ease, padding 200ms ease; } .partners-cta a:hover { color: var(--brick); border-color: var(--brick); } html:lang(zh) .partners-cta a { font-family: var(--cjk-sans); letter-spacing: 0.16em; text-transform: none; font-weight: 500; font-size: 13px; } /* HERITAGE TIMELINE ─────────────────────────────────────────────────── */ .timeline { display: grid; border-top: var(--rule-strong); margin-top: clamp(1rem, 2vw, 1.5rem); } .timeline-row { display: grid; grid-template-columns: 110px 1fr; gap: clamp(1rem, 2vw, 1.5rem); padding: 1.1rem 0; border-bottom: var(--rule); align-items: baseline; } .timeline-year { font-family: var(--mono); font-weight: 500; font-size: 1rem; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; } .timeline-event { font-size: 0.98rem; line-height: 1.55; color: var(--ink); } .timeline-event strong { font-weight: 600; } html:lang(zh) .timeline-event { font-family: var(--cjk-sans); letter-spacing: 0.04em; } .timeline-tag { display: inline-block; font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 500; color: var(--ink-soft); margin-right: 0.7em; padding-bottom: 1px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); vertical-align: 1px; } .timeline-tag.tag-cert { color: var(--brick); border-color: color-mix(in srgb, var(--brick) 50%, transparent); } html:lang(zh) .timeline-tag { font-family: var(--cjk-sans); letter-spacing: 0.12em; text-transform: none; font-size: 11px; } /* CART BUTTON IN TOPBAR ─────────────────────────────────────────────── */ .cart-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 6px 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid transparent; transition: color 180ms ease, border-color 180ms ease; cursor: pointer; } .cart-btn:hover { color: var(--ink); border-bottom-color: var(--ink); } .cart-btn-dot { color: var(--brass); } .cart-count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0; color: var(--paper); background: var(--ink); border-radius: 0; transition: background 200ms ease, transform 240ms cubic-bezier(.2,.7,.2,1); } .cart-btn[data-has-items="true"] .cart-count { background: var(--brick); } .cart-btn.is-flash .cart-count { transform: scale(1.18); } html:lang(zh) .cart-btn { font-family: var(--cjk-sans); font-size: 12.5px; letter-spacing: 0.16em; text-transform: none; } /* CART DRAWER ───────────────────────────────────────────────────────── */ .cart-drawer { position: fixed; inset: 0; z-index: 200; pointer-events: none; } .cart-drawer[aria-hidden="false"] { pointer-events: auto; } .cart-overlay { position: absolute; inset: 0; background: color-mix(in srgb, var(--ink) 38%, transparent); opacity: 0; transition: opacity 320ms cubic-bezier(.2,.7,.2,1); } .cart-drawer[aria-hidden="false"] .cart-overlay { opacity: 1; } .cart-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--paper); border-left: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 360ms cubic-bezier(.2,.7,.2,1); outline: none; } .cart-drawer[aria-hidden="false"] .cart-panel { transform: none; } .cart-head { position: relative; padding: 1.6rem 1.75rem 1.25rem; border-bottom: var(--rule-strong); } .cart-eyebrow { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); margin: 0 0 0.4rem; } .cart-eyebrow [lang="zh-Hant"] { font-family: var(--cjk-sans); letter-spacing: 0.1em; } .cart-eyebrow [lang="en"] { font-family: var(--mono); letter-spacing: 0.18em; } .cart-title { font-family: var(--serif); font-weight: 500; font-size: 1.4rem; line-height: 1.25; margin: 0; max-width: 26ch; } .cart-close { position: absolute; top: 1.2rem; right: 1.2rem; width: 36px; height: 36px; display: grid; place-items: center; font-family: var(--serif); font-size: 1.8rem; line-height: 0; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent); transition: background 180ms ease, color 180ms ease; } .cart-close:hover { background: var(--ink); color: var(--paper); } .cart-body { flex: 1 1 auto; overflow-y: auto; padding: 1.25rem 1.75rem; } .cart-empty { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); margin: 2.5rem 0; text-align: center; } .cart-line { display: grid; grid-template-columns: 1fr auto; gap: 0.5rem 1rem; padding: 1.1rem 0; border-bottom: var(--rule); } .cart-line:last-child { border-bottom: 0; } .cart-line-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .cart-line-sku { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-soft); } .cart-line-name { font-family: var(--serif); font-weight: 600; font-size: 0.98rem; margin: 0; color: var(--ink); } .cart-line-spec { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-soft); } .cart-line-actions { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; grid-column: 1 / -1; margin-top: 0.4rem; } .cart-line-price { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; } .cart-line-remove { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); padding-bottom: 1px; transition: color 180ms ease, border-color 180ms ease; } .cart-line-remove:hover { color: var(--brick); border-color: var(--brick); } .cart-foot { border-top: var(--rule-strong); padding: 1.25rem 1.75rem 1.6rem; background: var(--paper-deep); } .cart-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.5rem; } .cart-total-label { font-family: var(--mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.22em; color: var(--ink-soft); } .cart-total-value { font-family: var(--mono); font-weight: 500; font-size: 1.35rem; color: var(--ink); font-variant-numeric: tabular-nums; text-align: right; } .cart-total-extra { display: block; margin-top: 0.2rem; font-size: 10.5px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } .cart-line .qty-stepper { align-self: start; } .cart-note { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.04em; line-height: 1.55; color: var(--ink-soft); margin: 0 0 1rem; max-width: 38ch; } html:lang(zh) .cart-note { font-family: var(--cjk-sans); letter-spacing: 0.04em; font-size: 11.5px; } .cart-submit { width: 100%; display: inline-flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); background: var(--ink); transition: background 200ms ease, color 200ms ease; } .cart-submit:disabled { background: color-mix(in srgb, var(--ink) 22%, transparent); color: color-mix(in srgb, var(--ink) 50%, transparent); cursor: not-allowed; } .cart-submit:not(:disabled):hover { background: var(--brick); } html:lang(zh) .cart-submit { font-family: var(--cjk-sans); letter-spacing: 0.16em; text-transform: none; } /* Body scroll lock when cart is open */ body[data-cart-open="true"] { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .cart-overlay, .cart-panel { transition: none; } } /* TC PAGE · full Chinese mode (zh-Hant and zh-Hans) ──────────────────────────── */ html:lang(zh) body { font-family: var(--cjk-sans); } html:lang(zh) .display-xl, html:lang(zh) .section-title, html:lang(zh) .brand-h, html:lang(zh) .quote-h, html:lang(zh) .cap-title, html:lang(zh) .pedigree-zh, html:lang(zh) .contact-name { font-family: var(--cjk-serif); letter-spacing: 0.06em; font-weight: 700; } html:lang(zh) .display-xl { letter-spacing: 0.08em; line-height: 1.18; font-weight: 700; } /* English secondary spans inside TC headings get the small mono treatment */ html:lang(zh) .section-title [lang="en"], html:lang(zh) .quote-h [lang="en"] { font-family: var(--mono); font-size: 0.42em; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } /* Ensure mono is preserved on technical fields even when the page is TC */ html:lang(zh) .placeholder-token, html:lang(zh) .num-target, html:lang(zh) .num-suffix, html:lang(zh) .stat-value, html:lang(zh) .hero-stat-value, html:lang(zh) .reach-list, html:lang(zh) .cap-specs, html:lang(zh) .brand-points, html:lang(zh) .contact-list, html:lang(zh) .footer-addr address, html:lang(zh) .footer-marks ul, html:lang(zh) .footer-base, html:lang(zh) .established, html:lang(zh) .lang-switch, html:lang(zh) .quote-submit, html:lang(zh) .cat-sku, html:lang(zh) .cat-spec, html:lang(zh) .cat-price-amount, html:lang(zh) .cart-line-sku, html:lang(zh) .cart-line-spec, html:lang(zh) .cart-line-price, html:lang(zh) .cart-total-value { font-family: var(--mono); } /* Card-level CTA labels feel native in CJK */ html:lang(zh) .cat-add, html:lang(zh) .cart-line-remove, html:lang(zh) .cat-stock, html:lang(zh) .cat-price-unit, html:lang(zh) .cart-total-label { font-family: var(--cjk-sans); letter-spacing: 0.1em; text-transform: none; } html:lang(zh) .cat-name { font-family: var(--cjk-serif); letter-spacing: 0.04em; font-weight: 700; } /* Dotted joiner sits more comfortably with TC weight */ html:lang(zh) .title-dot { color: var(--brass); margin: 0 0.2ch; } /* RESPONSIVE ────────────────────────────────────────────────────────── */ @media (max-width: 1200px) { .topbar-nav ul { gap: 1rem; } .topbar-nav a { font-size: 11px; letter-spacing: 0.14em; } html:lang(zh) .topbar-nav a { font-size: 12.5px; letter-spacing: 0.1em; } /* The founding date is decoration; the section nav is navigation. Drop the date first so the nav survives several hundred pixels further down. */ .established, .established + .topbar-divider { display: none; } } /* The founding date is dropped by measurement now (.is-tight), not by a blanket language rule — so English keeps it wherever it genuinely fits. */ /* Only while the bar is one wide row — see the 320px note above. */ @media (min-width: 1081px) { .brand-name-primary { white-space: nowrap; } } /* English therefore also reaches the hamburger sooner than Chinese. */ @media (max-width: 1200px) { html[lang="en"] .topbar:not(.is-fitted) .topbar-inner { grid-template-columns: auto auto; gap: 1rem; } html[lang="en"] .topbar:not(.is-fitted) .topbar-nav { display: none; } html[lang="en"] .topbar:not(.is-fitted) .nav-toggle { display: inline-flex; } html[lang="en"] .topbar:not(.is-fitted) .nav-toggle-divider { display: block; } .hero-grid { min-height: 0; } .hero-text { padding-block: clamp(3rem, 6vw, 5rem); } .pedigree-inner { grid-template-columns: 1fr; gap: 1.75rem; } .pedigree-claim { border-left: 0; padding-left: 0; padding-top: 1.25rem; border-top: 1px solid color-mix(in srgb, var(--paper) 22%, transparent); } .pedigree-marks { justify-content: flex-start; } .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .numbers-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 1080px) { .topbar:not(.is-fitted) .topbar-inner { grid-template-columns: auto auto; gap: 1rem; } .topbar:not(.is-fitted) .topbar-nav { display: none; } } @media (max-width: 820px) { .topbar-inner { height: 56px; } .brand-zh { display: none; } .hero-grid { grid-template-columns: 1fr; } .hero-text { max-width: none; padding-inline: var(--gutter); justify-self: stretch; } .hero-image { order: -1; } .hero-image .img-placeholder, .hero-image .photo { aspect-ratio: 16/9; min-height: 0; } .hero-stats { grid-template-columns: 1fr; gap: 1.25rem; } .hero-stat { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 1rem; padding-block: 0.6rem; border-bottom: var(--rule); } .hero-stat:last-child { border-bottom: 0; } .hero-stat-value { font-size: 2rem; order: 2; } .hero-stat-label { order: 1; } .cap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem; } .cart-panel { width: min(420px, 92%); } .mfg-grid { grid-template-columns: 1fr; } .mfg-images { grid-template-columns: 1fr 1fr; } .mfg-images > :first-child { transform: none; } .numbers-grid { grid-template-columns: repeat(2, 1fr); } .brands-grid { grid-template-columns: 1fr; } .brand-card--oem { grid-template-rows: auto auto; } .brand-card--oem .img-placeholder, .brand-card--oem .photo { order: -1; } .reach-grid { grid-template-columns: 1fr; } .partners-grid { grid-template-columns: 1fr; } .partners-col:first-child { padding-right: 0; border-right: 0; border-bottom: var(--rule); } .partners-col:last-child { padding-left: 0; } .timeline-row { grid-template-columns: 80px 1fr; gap: 1rem; } .contact-cards { grid-template-columns: 1fr; } .contact-cards--single .contact-card { grid-template-columns: 1fr; } .contact-cards--single .contact-card .img-placeholder { width: 120px; height: 120px; } .quote-grid { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-base { flex-direction: column; gap: 0.75rem; align-items: flex-start; } } @media (max-width: 480px) { body { font-size: 15px; } .topbar-meta { gap: 0.75rem; } .established { display: none; } .cap-grid { grid-template-columns: 1fr; } .cat-grid { grid-template-columns: 1fr; } .cart-panel { width: 100%; } .numbers-grid { grid-template-columns: 1fr; } .mfg-images { grid-template-columns: 1fr; } .reach-list { grid-template-columns: 1fr; } .footer-grid { grid-template-columns: 1fr; } .pedigree-marks { gap: 1rem; flex-wrap: wrap; } .pedigree-marks .img-placeholder { width: 64px; } } /* ═════════════════════════════════════════════════════════════════════ INTERACTIVE LAYER · photos, mobile nav, filters, lightbox, toasts ═════════════════════════════════════════════════════════════════════ */ /* PHOTOS ────────────────────────────────────────────────────────────── */ .photo { position: relative; width: 100%; margin: 0; overflow: hidden; background: var(--steel); border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); isolation: isolate; } .photo[data-aspect="16/9"] { aspect-ratio: 16 / 9; } .photo[data-aspect="4/3"] { aspect-ratio: 4 / 3; } .photo[data-aspect="1/1"] { aspect-ratio: 1 / 1; } .photo[data-aspect="fill"] { aspect-ratio: auto; height: 100%; min-height: 480px; } .photo img { width: 100%; height: 100%; object-fit: cover; /* Light warm grade so mixed stock sits on the paper palette */ filter: saturate(0.82) sepia(0.06); transition: transform 900ms cubic-bezier(.2,.7,.2,1), opacity 600ms ease, filter 400ms ease; } .js .photo img { opacity: 0; } .js .photo img.is-loaded { opacity: 1; } /* Hero: cooler stock graded warm, soft ink wash at the seam with the text */ .hero .photo img { filter: saturate(0.5) sepia(0.28) contrast(1.04) brightness(0.96); } .hero .photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--ink) 28%, transparent), transparent 40%); pointer-events: none; } .photo--map { background: var(--paper-deep); } .photo--map img { filter: none; object-fit: contain; } .cap-card:hover .photo img, .cat-card:hover .photo img, .brand-card:hover .photo img, .mfg-images .photo:hover img { transform: scale(1.045); filter: saturate(0.95) sepia(0.02); } [data-zoom] { cursor: zoom-in; } [data-zoom]:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; } .photo-zoom-hint { position: absolute; right: 10px; bottom: 10px; z-index: 1; width: 32px; height: 32px; display: grid; place-items: center; font-family: var(--mono); font-size: 15px; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); opacity: 0; transform: translateY(4px); transition: opacity 220ms ease, transform 220ms ease; pointer-events: none; } [data-zoom]:hover .photo-zoom-hint, [data-zoom]:focus-visible .photo-zoom-hint { opacity: 1; transform: none; } /* SCROLL PROGRESS ───────────────────────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; z-index: 60; height: 2px; width: 100%; background: var(--brick); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; } /* NAV · active section + mobile menu ───────────────────────────────── */ .topbar-nav a.is-active { color: var(--ink); border-bottom-color: var(--brick); } .nav-toggle, .nav-toggle-divider { display: none; } .nav-toggle { align-items: center; gap: 0.55rem; padding: 6px 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); } html:lang(zh) .nav-toggle { font-family: var(--cjk-sans); font-size: 12.5px; letter-spacing: 0.16em; text-transform: none; } .nav-toggle-bars { display: grid; gap: 5px; width: 18px; } .nav-toggle-bars span { display: block; height: 1.5px; background: currentColor; transition: transform 260ms cubic-bezier(.2,.7,.2,1); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:first-child { transform: translateY(3.25px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:last-child { transform: translateY(-3.25px) rotate(-45deg); } @media (max-width: 1080px) { .topbar:not(.is-fitted) .nav-toggle { display: inline-flex; } .topbar:not(.is-fitted) .nav-toggle-divider { display: block; } .topbar-nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--paper); border-bottom: var(--rule-brass); box-shadow: 0 18px 30px -24px color-mix(in srgb, var(--ink) 50%, transparent); animation: nav-drop 260ms cubic-bezier(.2,.7,.2,1); } .topbar-nav.is-open ul { flex-direction: column; gap: 0; max-width: var(--container); margin: 0 auto; padding: 0.5rem var(--gutter) 1rem; } .topbar-nav.is-open li { border-bottom: var(--rule); } .topbar-nav.is-open li:last-child { border-bottom: 0; } .topbar-nav.is-open a { display: block; padding: 0.95rem 0; font-size: 12px; border-bottom: 0; } html:lang(zh) .topbar-nav.is-open a { font-size: 15px; } } @keyframes nav-drop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @media (max-width: 480px) { .cart-btn-dot { display: none; } .cart-btn-label, .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .topbar-meta { gap: 0.9rem; } .brand-name-secondary { display: none; } } /* SCROLL REVEAL ─────────────────────────────────────────────────────── */ .js [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 760ms cubic-bezier(.2,.7,.2,1), transform 760ms cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--reveal-i, 0) * 70ms); } .js [data-reveal].is-revealed { opacity: 1; transform: none; } /* FILTER CHIPS (catalogue + heritage) ─────────────────────────────── */ .filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); } .filter-bar-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin-right: 0.5rem; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent); transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .chip:hover { color: var(--ink); border-color: var(--ink); } .chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); } .chip-count { font-size: 10.5px; letter-spacing: 0; opacity: 0.6; font-variant-numeric: tabular-nums; } html:lang(zh) .chip, html:lang(zh) .filter-bar-label { font-family: var(--cjk-sans); letter-spacing: 0.1em; text-transform: none; font-size: 12.5px; } .chip:focus-visible, .nav-toggle:focus-visible, .cart-btn:focus-visible, .cat-add:focus-visible, .qty-step:focus-visible, .to-top:focus-visible, .contact-action:focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; } .is-filtered-out { display: none !important; } .cat-card.is-entering { animation: card-in 420ms cubic-bezier(.2,.7,.2,1) both; } @keyframes card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } .filter-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* LIGHTBOX ──────────────────────────────────────────────────────────── */ .lightbox { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); background: color-mix(in srgb, var(--ink) 88%, transparent); opacity: 0; transition: opacity 260ms ease; } .lightbox.is-open { opacity: 1; } .lightbox figure { margin: 0; max-width: min(1400px, 100%); display: grid; gap: 0.85rem; } .lightbox img { max-width: 100%; max-height: calc(100vh - 9rem); width: auto; margin: 0 auto; object-fit: contain; box-shadow: 0 30px 80px -30px #000; transform: scale(0.97); transition: transform 320ms cubic-bezier(.2,.7,.2,1); } .lightbox.is-open img { transform: none; } .lightbox figcaption { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.08em; color: color-mix(in srgb, var(--paper) 78%, transparent); } html:lang(zh) .lightbox figcaption { font-family: var(--cjk-sans); } .lightbox-btn { position: absolute; width: 44px; height: 44px; display: grid; place-items: center; font-family: var(--serif); font-size: 1.5rem; line-height: 1; color: var(--paper); border: 1px solid color-mix(in srgb, var(--paper) 30%, transparent); transition: background 180ms ease, color 180ms ease; } .lightbox-btn:hover, .lightbox-btn:focus-visible { background: var(--paper); color: var(--ink); outline: none; } .lightbox-close { top: 1rem; right: 1rem; } .lightbox-prev { left: 1rem; top: 50%; transform: translateY(-50%); } .lightbox-next { right: 1rem; top: 50%; transform: translateY(-50%); } body[data-lightbox-open="true"] { overflow: hidden; } /* TOAST ─────────────────────────────────────────────────────────────── */ .toast-region { position: fixed; left: 50%; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px)); z-index: 250; transform: translateX(-50%); display: grid; gap: 0.5rem; width: min(460px, calc(100% - 2rem)); pointer-events: none; } .toast { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.85rem 1rem 0.85rem 1.1rem; background: var(--ink); color: var(--paper); border-left: 3px solid var(--forest); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--ink) 80%, transparent); pointer-events: auto; animation: toast-in 320ms cubic-bezier(.2,.7,.2,1); } .toast.is-leaving { animation: toast-out 240ms ease forwards; } html:lang(zh) .toast { font-family: var(--cjk-sans); font-size: 13px; } .toast-action { flex: none; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--paper); border-bottom: 1px solid color-mix(in srgb, var(--paper) 50%, transparent); padding-bottom: 1px; } html:lang(zh) .toast-action { font-family: var(--cjk-sans); letter-spacing: 0.1em; font-size: 12px; } .toast-action:hover { color: var(--brass); border-color: var(--brass); } @keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateY(8px); } } /* BACK TO TOP ───────────────────────────────────────────────────────── */ .to-top { position: fixed; right: clamp(1rem, 2.5vw, 1.75rem); bottom: calc(clamp(1rem, 2.5vw, 1.75rem) + env(safe-area-inset-bottom, 0px)); z-index: 40; width: 44px; height: 44px; display: grid; place-items: center; font-family: var(--serif); font-size: 1.2rem; color: var(--paper); background: var(--ink); opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 240ms ease, transform 240ms ease, background 180ms ease; } .to-top.is-visible { opacity: 1; transform: none; pointer-events: auto; } .to-top:hover { background: var(--brick); } /* CONTACT ACTIONS (copy / WhatsApp) ───────────────────────────────── */ .contact-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; } .contact-action { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); transition: background 180ms ease, color 180ms ease, border-color 180ms ease; } .contact-action:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); } .contact-action--wa { background: var(--forest); color: var(--paper); border-color: var(--forest); } .contact-action--wa:hover { background: var(--ink); border-color: var(--ink); } .contact-action.is-done { background: var(--forest); color: var(--paper); border-color: var(--forest); } html:lang(zh) .contact-action { font-family: var(--cjk-sans); letter-spacing: 0.1em; text-transform: none; font-size: 12px; } /* FORM VALIDATION ───────────────────────────────────────────────────── */ .field-error { min-height: 1em; margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--brick); } html:lang(zh) .field-error { font-family: var(--cjk-sans); font-size: 12px; } .field [aria-invalid="true"] { border-bottom-color: var(--brick); } .field-label .req { color: var(--brick); margin-left: 0.25em; } .quote-submit[aria-busy="true"] { opacity: 0.6; pointer-events: none; } /* CART EXTRAS ───────────────────────────────────────────────────────── */ .cart-clear { display: block; margin: 0.85rem auto 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); border-bottom: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); } .cart-clear:hover { color: var(--brick); border-color: var(--brick); } .cart-clear[hidden] { display: none; } html:lang(zh) .cart-clear { font-family: var(--cjk-sans); letter-spacing: 0.1em; text-transform: none; font-size: 12px; } .cart-line.is-removing { animation: toast-out 220ms ease forwards; } @media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; } .js .photo img { opacity: 1; } .cap-card:hover .photo img, .cat-card:hover .photo img, .brand-card:hover .photo img { transform: none; } } /* FOOTER LEGAL LINE · business name, ABN, trade mark ──────────────── */ .footer-legal { display: flex; flex-wrap: wrap; gap: 0.35rem 2rem; padding-block: 1.25rem; border-bottom: 1px solid color-mix(in srgb, var(--paper) 14%, transparent); font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; line-height: 1.6; color: color-mix(in srgb, var(--paper) 62%, transparent); } .footer-legal p { margin: 0; } .footer-legal .placeholder-token { color: var(--paper); } html:lang(zh) .footer-legal { font-family: var(--cjk-sans); font-size: 12.5px; } html:lang(zh) .footer-legal [lang="en"] { font-family: var(--mono); } .quote-copy { margin-top: 0.75rem; } /* CATALOGUE · product copy, version picker, quote-only price ───────── */ .photo--product { background: #ebe5da; } .photo--product img, .cat-card:hover .photo--product img { filter: none; } .cat-desc { flex-grow: 1; /* pushes option, price and buttons to the card bottom so rows line up */ margin: 0; font-size: 0.92rem; line-height: 1.5; color: var(--ink-soft); } .cat-option { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 0.3rem; padding: 0.5rem 0; border-top: var(--rule); } .cat-option-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); flex: none; } html:lang(zh) .cat-option-label { font-family: var(--cjk-sans); letter-spacing: 0.1em; text-transform: none; font-size: 12px; } .cat-variant { min-width: 0; max-width: 70%; padding: 0.4rem 1.6rem 0.4rem 0.6rem; font-family: var(--sans); font-size: 0.88rem; color: var(--ink); background-color: color-mix(in srgb, var(--paper) 60%, transparent); border: 1px solid color-mix(in srgb, var(--ink) 22%, transparent); border-radius: 0; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%); background-position: calc(100% - 12px) 55%, calc(100% - 7px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; cursor: pointer; } .cat-variant:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; } .cat-price-amount--quote { font-size: 1.1rem; letter-spacing: 0.02em; } html:lang(zh) .cat-price-amount--quote { font-family: var(--cjk-sans); } /* Narrow screens: keep the top bar on one line and product cards inside the viewport */ .cat-card { min-width: 0; } @media (max-width: 640px) { .established, .established + .topbar-divider { display: none; } .topbar-meta { gap: 0.85rem; } .cat-option { flex-wrap: wrap; } .cat-variant { max-width: 100%; width: 100%; } } /* Labels leave the row on narrow screens but stay readable to screen readers: display:none would leave the buttons nameless ("button", "0"). */ @media (max-width: 560px) { .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } } .cat-stock--new { color: var(--brick); } .cat-stock--new .cat-dot { background: var(--brick); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brick) 18%, transparent); } /* LEGAL PAGES · privacy, terms ─────────────────────────────────────── */ .legal { max-width: 78ch; padding-block: clamp(3rem, 7vw, 5.5rem) clamp(4rem, 8vw, 6rem); } .legal .section-title { margin-bottom: 0.2em; } .legal-updated { margin: 0 0 2rem; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); } html:lang(zh) .legal-updated { font-family: var(--cjk-sans); font-size: 12.5px; letter-spacing: 0.08em; text-transform: none; } .legal-lede { font-family: var(--serif); font-style: italic; font-size: 1.15rem; line-height: 1.55; margin: 0 0 2rem; } html:lang(zh) .legal-lede { font-family: var(--cjk-serif); font-style: normal; } .legal h2 { font-family: var(--serif); font-weight: 600; font-size: 1.25rem; margin: 2.25rem 0 0.6rem; padding-top: 1.25rem; border-top: var(--rule); } html:lang(zh) .legal h2 { font-family: var(--cjk-serif); letter-spacing: 0.04em; } .legal p, .legal li { color: var(--ink-soft); line-height: 1.65; } .legal p { margin: 0 0 0.9rem; } .legal ul { margin: 0 0 1rem; padding-left: 1.2rem; list-style: disc; } .legal li { margin-bottom: 0.45rem; } .legal li::marker { color: var(--brass); } .legal strong { color: var(--ink); font-weight: 600; } .legal a { color: var(--ink); border-bottom: 1px solid color-mix(in srgb, var(--ink) 30%, transparent); } .legal a:hover { color: var(--brick); border-color: var(--brick); } .legal-nav a { text-transform: none; letter-spacing: 0.06em; } @media (max-width: 1080px) { .legal-page .topbar-nav { display: block; } } @media (max-width: 560px) { .legal-page .topbar-nav { display: none; } } /* ───────────────────────────────────────────────────────────────────── FINISHING PASS Three unfilled image placeholders were still rendering as grey hatched boxes on the live pages. They are replaced by deliberate typographic marks: honest about there being no photograph, but designed rather than unfinished. ───────────────────────────────────────────────────────────────────── */ /* Contact portrait → monogram. Replace with a real headshot when there is one: swap the div for . */ .contact-monogram { width: 160px; aspect-ratio: 1 / 1; flex: none; display: grid; place-items: center; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); } .contact-monogram span { font-family: var(--serif); font-size: 46px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } html:lang(zh) .contact-monogram span { font-family: var(--cjk-serif); font-size: 52px; letter-spacing: 0; } /* Certification marks → typographic badges rather than fake logos. The real ISO and FSC artwork carries usage rules (FSC needs the licence code), so a set wordmark is both safer and tidier until those arrive. */ .pedigree-marks .img-placeholder.cert { background-image: none; background: transparent; border: 1px solid color-mix(in srgb, var(--paper) 38%, transparent); display: grid; place-items: center; padding: 0; } .pedigree-marks .img-placeholder.cert .ph-tag { font-family: var(--mono); font-size: 10px; font-weight: 600; line-height: 1.35; letter-spacing: 0.1em; color: var(--paper); opacity: 0.92; } /* The definition column was so narrow that "Mobile · WhatsApp (AU)" broke across three lines beside a two-word value. */ /* The label column was a fixed 5.5rem, so a two-word label broke onto three lines beside a single-line value. */ .contact-list > div { grid-template-columns: 7rem 1fr; gap: 0.5rem 1.25rem; } @media (max-width: 480px) { .contact-list dt { min-width: 0; } .contact-monogram { width: 120px; } .contact-monogram span { font-size: 36px; } } /* ───────────────────────────────────────────────────────────────────── TOPBAR FIT The bar used to collapse at guessed pixel breakpoints, which assumed a particular set of font metrics. Webfonts load late and render at widths no stylesheet can predict, so the bar now measures itself at runtime (see fitTopbar in script.js) and sets .is-compact when the row genuinely does not fit. The px media queries above remain as the no-JS fallback. ───────────────────────────────────────────────────────────────────── */ .topbar.is-compact .topbar-inner { grid-template-columns: auto auto; gap: 1rem; } .topbar.is-compact .topbar-nav:not(.is-open) { display: none; } .topbar.is-compact .nav-toggle { display: inline-flex; } .topbar.is-compact .nav-toggle-divider { display: block; } /* Stage 2 — drop the founding date. */ .topbar.is-tight .established, .topbar.is-tight .established + .topbar-divider { display: none; } /* Stage 3 — tighten the nav's own spacing before giving it up entirely. Buys roughly 50px on the English bar, which is the difference between keeping seven labels on screen and collapsing to a hamburger. */ .topbar.is-snug .topbar-nav ul { gap: 0.8rem; } .topbar.is-snug .topbar-nav a { letter-spacing: 0.08em; } html:lang(zh) .topbar.is-snug .topbar-nav a { letter-spacing: 0.04em; } /* While measuring, the row must be allowed to exceed the bar without the page itself scrolling sideways for a frame. */ .topbar-inner { overflow: hidden; } .topbar.is-measuring .topbar-inner { overflow: visible; } /* Below ~380px the wordmark plus the meta strip cannot both fit, so the brand falls back to its glyph alone — the mark still identifies the site and the controls stay reachable. */ @media (max-width: 380px) { .brand-name { display: none; } .topbar-inner { padding-inline: 1rem; } } /* CJK 斷行控制 ──────────────────────────────────────────────────────── 中文沒有空格，瀏覽器可以在任意兩字之間斷行，所以標題很容易掉出「孤字行」 ——最後一行只剩一兩個字，例如「嗎？」。英文也會有單字落單的情形。 text-wrap: balance 會把各行拉成接近等長，孤字行自然消失；標題字數短， 在瀏覽器的行數上限（通常 4–6 行）之內。內文用 pretty，不強制等長， 只避免最後一行落單。兩者都是漸進增強，舊瀏覽器忽略即可，另有 JS 後援。 */ .display-xl, .section-title, .brand-h, .quote-h, .sub-head, .cap-title, .contact-head, .section-eyebrow, .sub-eyebrow, .footer-eyebrow, .partners-col-eyebrow, .pedigree-eyebrow, .cart-title, .cart-head, .calc-out-t, .calc-sec-t, .calc-headline-k, .calc-pair-k, .ctr-name, .ctr-ref, .cat-name, .cat-spec, .cat-foot, .stat-note, .stat-k, .calc-pick-cat, .calc-pick-spec, .calc-block-note, .partners-list li, .contact-list li, .reach-list li, .cap-list li, h1, h2, h3, h4 { text-wrap: balance; } .section-lede, .hero-sub, .calc-note, .calc-warn, .ctr-note, .cat-spec, .cap-body, p, li, dd, figcaption, blockquote, summary { text-wrap: pretty; } /* 標點符號不該獨自成行，也不該被拆開。 */ :root { line-break: strict; } [lang="zh-Hant"], [lang^="zh"] { line-break: strict; overflow-wrap: break-word; } /* 後援：瀏覽器不支援 balance 時，script.js 會量測並補上這個變數， 把標題的寬度收到剛好不產生孤字行的位置。 */ .js-balanced { max-width: var(--balance-w, none); } /* HERO ACTIONS · the first thing a buyer can do, styled like the site's existing buttons (filled = cart submit, underlined = catalogue "add"). */ .hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin: -0.6rem 0 2.6rem; } .hero-cta { display: inline-flex; align-items: baseline; gap: 0.75rem; padding: 0.95rem 1.4rem; font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--paper); background: var(--ink); transition: background 200ms ease, gap 200ms ease; } .hero-cta:hover { background: var(--brick); gap: 1.1rem; } .hero-cta-alt { display: inline-flex; padding: 0.55rem 0; font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); border-bottom: 2px solid var(--ink); transition: color 200ms ease, border-color 200ms ease; } .hero-cta-alt:hover { color: var(--brick); border-color: var(--brick); } html:lang(zh) .hero-cta, html:lang(zh) .hero-cta-alt { font-family: var(--cjk-sans); font-size: 14px; letter-spacing: 0.16em; text-transform: none; } @media (max-width: 480px) { .hero-cta { width: 100%; justify-content: space-between; } } /* Phones: the language switch moves into the menu (view-switch.js), which left two divider rules side by side between the cart and the menu button. */ .topbar .topbar-meta .topbar-divider + .nav-toggle-divider { display: none; } /* ERP DATA ───────────────────────────────────────────────────────────── Catalogue figures come from the factory's ERP (文中): item codes, packs per carton, and outer-carton sizes from its 外箱 records. */ /* Outer carton under each spec line; a variant without a known carton hides it */ .cat-carton { margin-top: -0.4rem; } .cat-carton[hidden] { display: none; } /* More from our range: own products that don't have a photo yet */ .range-more .sub-head { margin-top: clamp(2.5rem, 5vw, 3.5rem); } .range-lede { color: var(--ink-soft); max-width: 62ch; margin: 0 0 1.1rem; } .range-tbl { width: 100%; border-collapse: collapse; border-top: var(--rule); } .range-tbl th, .range-tbl td { text-align: left; vertical-align: baseline; padding: 0.75rem 1.25rem 0.75rem 0; border-bottom: var(--rule); } .range-tbl thead th { font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .range-tbl tbody th { font-weight: 500; } .range-tbl tbody td { font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-soft); } .range-tbl tbody td:first-child { white-space: nowrap; } .range-tbl tbody td:last-child { padding-right: 0; } html:lang(zh) .range-tbl thead th { font-family: var(--cjk-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: none; } html:lang(zh) .range-tbl tbody th { font-family: var(--cjk-sans); } @media (max-width: 640px) { .range-tbl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .range-tbl tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.9rem; padding: 0.8rem 0; border-bottom: var(--rule); } .range-tbl th, .range-tbl td { padding: 0; border: 0; } .range-tbl tbody td:last-child { grid-column: 1 / -1; } } /* OEM card: the ranges the mill makes for other brands */ .oem-ranges-h { margin: 0.75rem 0 0; font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); } html:lang(zh) .oem-ranges-h { font-family: var(--cjk-sans); font-size: 12px; letter-spacing: 0.1em; text-transform: none; } .cap-specs.oem-ranges { max-height: none; opacity: 1; margin-top: 0.1rem; }