margins stacked on top. */ .section-lead.cat-lead { max-width: none; margin: 0 0 24px; } h2.section-title:has(+ .cat-lead) { margin-bottom: 12px; } .section-lead.cat-lead .bi-unit > p { margin: 0; line-height: 1.7; } .section-lead.cat-lead .bi-unit > .zh { font-size: 16px; } .section-lead.cat-lead .bi-unit > .en { font-size: 14px; margin-top: 4px; } /* Condition note under a category's cards: same full-width alignment and zh/en rhythm, full text, plain note (not a warning). */ .spec-caveat .bi-unit > p { margin: 0; line-height: 1.7; } .spec-caveat .bi-unit > .en { margin-top: 4px; font-size: 12px; } /* Short bilingual labels on ONE line (user 2026-09-29 18:30 / 18:33 / 18:38): "完整中文 / Full English", English lighter but readable, wrapping naturally -- every short label type: buttons and CTAs (incl. split-hero CTAs), header nav and dropdown items, page nav, footer link lists, product-card open / download / ask links and "full spec", card CTAs, form field labels and the submit button. The "/" is presentational (empty alt text, not read out). Long text, hero eyebrows / H1s, section titles and paragraphs keep their existing layout. A single arrow stays at the end / right. */ .lbl > .zh::after, .btn .bi-inline > .zh::after, .page-nav a > .zh::after, .site-footer .ft-list a > .zh::after, .card-cta-txt .bi-inline > .zh::after, .spec-card .spec-file-lbl .bi-inline > .zh::after, .spec-card .spec-file-single .bi-inline > .zh::after, .spec-card .spec-ask-txt .bi-inline > .zh::after, .spec-card .spec-more summary .bi-inline > .zh::after, .form-row label .bi-inline > .zh::after, .segment-cta .bi-inline > .zh::after, .expo-album summary .bi-inline > .zh::after, a > .bi-inline > .zh::after { content: " /" / ""; font-weight: 400; opacity: .55; } .eyebrow .lbl > .zh::after, .orig-lbl .lbl > .zh::after { content: none; } .dropdown-menu a .lbl .en, .page-nav a .zh, .page-nav a .en, .site-footer .ft-list .zh, .site-footer .ft-list .en, .hero-illustrative .hero-cta-group .btn .bi-inline .zh, .hero-illustrative .hero-cta-group .btn .bi-inline .en, .card-cta-txt .bi-inline .zh, .card-cta-txt .bi-inline .en, .spec-card .spec-file-lbl .bi-inline .zh, .spec-card .spec-file-lbl .bi-inline .en, .spec-card .spec-file-single .bi-inline .zh, .spec-card .spec-file-single .bi-inline .en, .spec-card .spec-ask-txt .bi-inline .zh, .spec-card .spec-ask-txt .bi-inline .en, .spec-card .spec-more summary .bi-inline .en, .form-row label .bi-inline .zh, .form-row label .bi-inline .en, form .btn-brand .bi-inline .zh, form .btn-brand .bi-inline .en, a > .bi-inline > .zh, a > .bi-inline > .en, table.spec-table.stack-sm td a .bi-unit > .zh, table.spec-table.stack-sm td a .bi-unit > .en { display: inline; margin: 0; } .page-nav a { display: inline-block; } .site-footer .ft-list a .en { margin-top: 0; } .site-footer .ft-list a { min-height: 32px; padding: 5px 0; } /* one-line links keep a >= 32 px tap target */ .dropdown-menu a .lbl-arrow { margin-left: .35em; } @media (min-width: 1361px) { .dropdown-menu { min-width: 0; width: max-content; max-width: 460px; } } .awards-cell .award-link .lbl > .zh, .awards-cell .award-link .lbl > .en { display: inline; } /* Contact data rows (footer + contact page): "電話 Phone" label group on one line, the value in its own column; each row sizes to its own content (no fixed wide label column); narrow phones stack the whole label group above the value. */ .ci-row, .site-footer .ft-row { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 14px; row-gap: 2px; } .ci-row .ci-k, .site-footer .ft-row .ft-k { flex: 0 1 auto; max-width: 100%; } .ci-row .ci-v { flex: 1 1 10em; min-width: 0; } .site-footer .ft-row .ft-v { flex: 0 1 auto; min-width: 0; overflow-wrap: normal; } .ci-row .ci-k .zh, .ci-row .ci-k .en { display: inline; } .ci-row .ci-k .en { font-size: 14px; font-weight: 400; } .site-footer .ft-row .ft-k .ft-k-en { grid-column: auto; font-size: 14px; font-weight: 400; margin: 0; } } /* About: related media coverage under the awards table (user 18:43) -- compact list, two existing articles, original links */ .award-press { margin: 20px 0 0; } .award-press-h { font-size: 18px; margin: 0 0 8px; color: var(--brand-dark); } .award-press-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .award-press-list li { border-top: 1px solid var(--border); padding: 10px 0 0; display: flex; flex-direction: column; gap: 3px; } .award-press-list .ap-meta { font-size: 13px; color: var(--muted); } .award-press-list .ap-title { font-weight: 600; } .award-press-list .bi-unit > .zh, .award-press-list .bi-unit > .en { font-size: 14px; font-weight: 400; color: var(--muted); margin: 0; } .award-press-list .ap-link { align-self: flex-start; display: inline-flex; align-items: center; min-height: 32px; overflow-wrap: anywhere; } /* About awards (user 18:48): compact image + text rows -- the original-site award photo first (whole image, natural aspect, never cropped, click opens the full original), then year / award / item top-aligned, tighter row padding. Phones: the photo sits above the text at a moderate width, no empty frame. */ .awards-table col.c-img { width: 190px; } .awards-table col.c-year { width: 9%; } .awards-table col.c-award { width: 34%; } .awards-table col.c-item { width: auto; } .awards-table th, .awards-table td { padding: 12px 12px; } .awards-table td.award-img-cell { padding-left: 0; } .award-img { display: block; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #fff; line-height: 0; } .award-img img { display: block; width: 100%; height: auto; } .award-img:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; } .awards-cell .award-link { margin-right: 14px; } @media (max-width: 640px) { .awards-table td.award-img-cell { padding: 0 0 8px; } .award-img { max-width: 300px; } } /* Resources video card whose heading is the original company site's title: the YouTube title follows as secondary info */ .video-card .video-orig { margin: 2px 0 4px; font-size: 13px; color: var(--muted); line-height: 1.45; } /* Resources media coverage (user 21:34): text left, the article's own image right (about 30%, 280-360 px), top-aligned, whole image at its own ratio (never cropped, never drawn wider than the original), linked to the same article; a small credit line under it. Rows without an image keep the full width. Phones: the image follows the text. */ .media-row.has-img { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 30%, 360px); column-gap: 28px; align-items: start; } .media-row .media-text { min-width: 0; } .media-fig { margin: 0; } .media-fig a { display: block; line-height: 0; border: 1px solid var(--border); border-radius: 4px; overflow: hidden; background: #fff; } .media-fig img { display: block; width: 100%; height: auto; } .media-fig a:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; } .media-credit { margin-top: 6px; font-size: 12px; line-height: 1.45; color: var(--muted); } .media-credit [lang="en"] { display: block; } @media (max-width: 720px) { .media-row.has-img { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } } /* Resources exhibitions (user 21:40): compact image + text rows like the other image/text rows -- the event's lead image as a thumbnail column on the left (about 29%, 280-340 px, whole image at its own ratio, never cropped or upscaled; click opens the full original), title / full zh + en text / album on the right, top-aligned; card height follows the content. Phones: stacked, the thumbnail keeps a moderate cap (never a full-screen banner). Replaces the full-width lead banner. */ .expo-row { display: grid; grid-template-columns: clamp(280px, 29%, 340px) minmax(0, 1fr); column-gap: 28px; align-items: start; } .expo-row .expo-body { min-width: 0; } .expo-row .expo-body > h3:first-child { margin-top: 0; } .expo-thumb { display: block; line-height: 0; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; background: #fff; } .expo-thumb img { display: block; width: 100%; height: auto; } .expo-thumb:focus-visible { outline: 3px solid #ffd400; outline-offset: 2px; } @media (max-width: 720px) { .expo-row { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } .expo-thumb { max-width: 340px; } } /* Page nav label (user 21:47): 「本頁主題 / On this page」 is a short label too -- one group on one line, first-line baseline aligned with the links; no block zh/en split, no extra padding; the links wrap to the next row when they do not fit. Links keep a >= 32 px tap target via vertical padding (not a fixed height). */ .page-nav .container { align-items: baseline; } .page-nav .tc-anchors-label { padding-top: 0; } .page-nav .tc-anchors-label .zh, .page-nav .tc-anchors-label .en { display: inline; } .page-nav .tc-anchors-label > .zh::after { content: " /" / ""; font-weight: 400; opacity: .55; } .page-nav a { display: inline-block; min-height: 0; padding: 8px 0; } /* Spec-card file links carry their language (中文 / English / 中英 / ZH–EN): the button grows with its text instead of a fixed number square; the two groups wrap naturally on narrow cards (user 21:50). Card layout otherwise unchanged. */ .spec-card .spec-nums { flex-wrap: wrap; flex: 0 1 auto; justify-content: flex-end; } .spec-card .spec-nums a { width: auto; min-width: 36px; padding: 0 10px; white-space: nowrap; font-size: 13px; } /* Non-clickable short labels (user 21:47): case-card stage tags (挑戰 / Challenge, 方案 / Solution, 成果 / Outcome, home case tags) and the medical document-step labels (1. 提出需求 / 1. Tell us your need) are one "中文 / English" group on one line, wrapping naturally -- like the clickable short labels. Sentences, list items, stats and values keep their layout. */ .case-stage.bi-unit, .case-stage .bi-unit, .doc-steps b .bi-unit { display: block; } .case-stage.bi-unit > .zh, .case-stage.bi-unit > .en, .case-stage .bi-unit > .zh, .case-stage .bi-unit > .en, .doc-steps b .bi-unit > .zh, .doc-steps b .bi-unit > .en { display: inline; margin: 0; } .case-stage.bi-unit > .zh::after, .case-stage .bi-unit > .zh::after, .doc-steps b .bi-unit > .zh::after { content: " / " / ""; font-weight: 400; opacity: .55; } /* Page heroes with the original teal line-art (user 2026-09-29 22:48): products = fibre bundle, technology = membrane pores, resources = four application fields (v2 icons). The whole illustration sits in a right-hand layer that takes the hero's own height (16:9, never cropped top/bottom, never making the hero taller); its left part fades into the same teal base; the text column stays left and never runs under the drawing. Phones: the drawing follows the text as a square crop of its right half (where all of its content is), below the CTAs. Other pages keep the water banner. */ .hero.hero-art { position: relative; overflow: hidden; background: linear-gradient(100deg, #05283a 0%, #073a50 55%, #0a5b74 100%); } .hero.hero-art::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 16 / 9; background: var(--hero-art) right center / cover no-repeat; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 42%); mask-image: linear-gradient(90deg, transparent 0%, #000 42%); pointer-events: none; } .hero.hero-art .container { position: relative; z-index: 1; } /* text keeps the original hero measure (sub 640 px, as before the art) so the hero height is unchanged (user 23:26: products was 455 px with an orphan 「品。」 at 52 %); the art's drawing starts right of it at every width > 1100 px */ .hero.hero-art .sub { max-width: 640px; } .hero.hero-art .sub .zh { text-wrap: pretty; } .hero.art-fibers { --hero-art: url('../hero/hero-fibers.svg'); } .hero.art-membrane { --hero-art: url('../hero/hero-membrane.svg'); } .hero.art-fields { --hero-art: url('../hero/hero-fields-v2.svg'); } @media (max-width: 1100px) { .hero.hero-art .eyebrow, .hero.hero-art h1, .hero.hero-art .sub { max-width: none; } .hero.hero-art::after { position: static; display: block; width: min(calc(100% - 32px), 360px); aspect-ratio: 1 / 1; margin: 24px 16px 0; border-radius: 10px; -webkit-mask-image: none; mask-image: none; } } /* hero art on narrow screens: left edge lines up with the page container (same gutter as the text above) */ @media (max-width: 1100px) { .hero.hero-art::after { margin-left: calc(4% ); } } @media (max-width: 900px) { .hero.hero-art::after { margin-left: 24px; } } @media (max-width: 560px) { .hero.hero-art::after { margin-left: 16px; } } /* Entry cards with a photo (personal: outdoor / household; business: medical / industrial -- the only segment-card images, user 23:15): the whole 4:3 original at the card width (no fixed 160 px band, no cover crop, no contain letterbox). */ .segment-card img, .segment-card img.img-contain { display: block; width: 100%; height: auto; object-fit: initial; background: none; } /* Footer rhythm (user 23:13): Solutions list, the three contact rows and the reports / FAQ links share one compact rhythm -- text 22 px (zh 16) / 20 px (en 14) line boxes, every item a >= 32 px row from symmetric padding (not line-height plus padding plus min-height stacked), 4 px between rows; wrapped text simply grows the row. */ .site-footer .ft-list { gap: 4px; } .site-footer .ft-contact { gap: 4px; margin-bottom: 4px; } .site-footer .ft-list a { min-height: 32px; padding: 5px 0; line-height: 22px; box-sizing: border-box; } .site-footer .ft-list a .zh { line-height: 22px; } .site-footer .ft-list a .en { line-height: 20px; } .site-footer .ft-row { min-height: 32px; align-items: center; } .site-footer .ft-row .ft-k, .site-footer .ft-row .ft-v { line-height: 22px; } .site-footer .ft-row .ft-k .ft-k-en { line-height: 20px; } .site-footer .ft-row .ft-v a { min-height: 32px; line-height: 22px; } .site-footer .ft-links { gap: 4px 28px; } /* Real photos of people (About team / exhibition photos -- the only real-photo grid with people; the outdoor grid holds product photos and keeps its layout; user 23:47): each photo whole at its own ratio (no fixed 180 px band, no cover crop cutting heads), top-aligned; the source line sits under the caption. Spec-card, equipment and report grids keep their own rules. */ .real-photo-grid.about-photos { align-items: start; } .real-photo-grid.about-photos img { height: auto; object-fit: initial; } .real-photo-grid .photo-src { display: block; margin-top: 4px; font-size: 12px; line-height: 1.5; color: var(--muted); } .real-photo-grid .photo-src [lang="en"] { display: block; } .real-photo-grid .photo-src a { display: inline-flex; align-items: center; min-height: 32px; } /* Personal / business entry cards as stacked compact image + text rows (user 00:05): the whole 4:3 photo as a small column (280-320 px, natural height), the full tag / titles / text / points / CTA beside it, top-aligned; rows keep their own height. Narrow screens: photo above the text, <= 320 px. The whole row stays one link. */ .segments-grid.seg-rows { grid-template-columns: minmax(0, 1fr); gap: 28px; } .seg-rows .segment-card { display: grid; grid-template-columns: clamp(280px, 26%, 320px) minmax(0, 1fr); column-gap: 26px; align-items: start; padding: 16px; } .seg-rows .segment-card img { width: 100%; height: auto; border-radius: 6px; } .seg-rows .segment-card .segment-body { padding: 0; } @media (max-width: 720px) { .seg-rows .segment-card { grid-template-columns: minmax(0, 1fr); row-gap: 14px; } .seg-rows .segment-card img { max-width: 320px; } } .hero.art-about { --hero-art: url('../hero/hero-about-continuity.svg'); } /* 圖意 / Visual meaning caption (user 00:44): desktop -- the drawing layer stops 52 px above the hero's bottom edge (whole, never cropped, hero height unchanged) and the caption sits in that strip, right-aligned under the drawing; <= 1100 px it follows the drawing below the text. zh 14 / en 13, zh and en on their own lines. */ .hero.hero-art .hero-art-caption { position: absolute; right: 4%; bottom: 6px; z-index: 1; margin: 0; max-width: min(660px, 50%); text-align: right; color: rgba(255,255,255,.84); } .hero.hero-art .hero-art-caption .zh, .hero.hero-art .hero-art-caption .en { display: block; } .hero.hero-art .hero-art-caption .zh { font-size: 14px; line-height: 20px; } .hero.hero-art .hero-art-caption .en { font-size: 13px; line-height: 18px; color: rgba(255,255,255,.72); } @media (min-width: 1101px) { .hero.hero-art::after { bottom: 64px; } } /* 64 px strip: room for a 3-line caption at 1920 */ @media (max-width: 1100px) { .hero.hero-art { display: flex; flex-direction: column; } .hero.hero-art > .container { order: 0; } .hero.hero-art::after { order: 1; } .hero.hero-art .hero-art-caption { order: 2; position: static; max-width: none; text-align: left; margin: 10px 24px 0; } } @media (max-width: 560px) { .hero.hero-art .hero-art-caption { margin: 10px 16px 0; } } /* About brand memory row (user 00:41): whole water-splash image as a small left column (280-320 px), short story beside */ .brand-memory { display: grid; grid-template-columns: clamp(280px, 26%, 320px) minmax(0, 1fr); column-gap: 26px; align-items: start; margin: 28px 0 0; } .brand-memory img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); } .brand-memory-text h3 { margin: 0 0 8px; } @media (max-width: 720px) { .brand-memory { grid-template-columns: minmax(0, 1fr); row-gap: 12px; } .brand-memory img { max-width: 320px; } } /* One rhythm for every section title + bilingual intro (user 00:57 / 00:58; the About "公司簡介" baseline), all pages: title -> 10 px -> zh line -> 2 px -> en line -> 24 px -> next block. Normal flow only: no -14 px pull-up, no default
margins stacked inside the nested bi-unit. Title -> card grid / table / list keeps the shared 24 px. */ h2.section-title:has(+ .section-lead), h2.section-title:has(+ .section-intro) { margin-bottom: 10px; } .section-lead, .section-lead.cat-lead { margin: 0 0 24px; } .section-intro { margin: 0 0 24px; } .section-lead p, .section-lead .bi-unit > p, .section-intro .bi-unit > p { margin: 0; } .section-lead .bi-unit > .en, .section-lead.bi > .en, .section-lead.cat-lead .bi-unit > .en, .section-intro .bi-unit > .en { margin-top: 2px; } /* Personal entry rows only (user 01:40): photo about a third of the row, 360-400 px, 24 px gap. Business keeps .seg-rows as is. */ .seg-rows.seg-rows-lg .segment-card { grid-template-columns: clamp(360px, 33%, 400px) minmax(0, 1fr); column-gap: 24px; } @media (max-width: 900px) { .seg-rows.seg-rows-lg .segment-card { grid-template-columns: clamp(240px, 38%, 360px) minmax(0, 1fr); } } @media (max-width: 720px) { .seg-rows.seg-rows-lg .segment-card { grid-template-columns: minmax(0, 1fr); } .seg-rows.seg-rows-lg .segment-card img { max-width: 400px; } } /* Household product rows (user 01:10): main image 240-280 px column (whole image, at most 300 px tall), then the album as small whole thumbnails; every image opens the full original. Right column: short "中文 / English" block labels + quoted data. */ .hh-rows .segment-card { grid-template-columns: clamp(240px, 24%, 280px) minmax(0, 1fr); column-gap: 24px; } .hh-media { min-width: 0; } .hh-main { display: flex; align-items: center; justify-content: center; background: #f4f6f8; border-radius: 6px; padding: 8px; } .seg-rows .segment-card .hh-main img { width: auto; max-width: 100%; max-height: 300px; border-radius: 4px; } .hh-album { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; } .hh-album a { display: flex; align-items: center; justify-content: center; height: 64px; background: #f4f6f8; border-radius: 4px; padding: 3px; } .seg-rows .segment-card .hh-album img { width: auto; max-width: 100%; max-height: 58px; border-radius: 2px; } .hh-media .photo-src { margin: 6px 0 0; font-size: 12px; line-height: 1.5; color: var(--muted); } .hh-media .photo-src .en { display: block; } .hh-media .photo-src a { display: inline-flex; align-items: center; min-height: 32px; } .hh-product h3 { margin: 0 0 10px; } .hh-block { margin-top: 14px; } .hh-block:first-of-type { margin-top: 0; } .hh-lbl { margin: 0 0 6px; font-size: 15px; } .hh-lbl .bi-inline > .zh::after { content: " /" / ""; font-weight: 400; opacity: .55; } .hh-lbl .bi-inline > .en { font-weight: 500; } .hh-block .bi-unit > p { margin: 0; } .hh-block .bi-unit + .bi-unit { margin-top: 8px; } .hh-block .bi-unit > .en { margin-top: 2px; } .hh-list { margin: 0; padding-left: 20px; } .hh-list li + li { margin-top: 6px; } .hh-list .bi-unit > span { display: block; } @media (max-width: 720px) { .hh-rows .segment-card { grid-template-columns: minmax(0, 1fr); } .hh-media { max-width: 320px; } } /* 圖意 / Visual meaning, revised (user 01:45, replaces the 00:44 right-hand strip): the drawing layer is back to its original full hero height (no 64 px strip, no shrink); the caption sits in normal flow after the text / CTA, starting at the hero's own content edge (same container as the H1), full width, left-aligned, small like the home carousel AI note (measured 11 px / 1.7; here 12 px / 18 px, weight 400). Desktop: the 70 px bottom padding absorbs it (14 + 20 margin + 2 x 18 lines = 70), so the hero height and the drawing size equal the pre-caption build 91bda51. <= 1100 px: after the drawing. */ @media (min-width: 1101px) { .hero.hero-art::after { bottom: 0; } .hero.hero-art { padding-bottom: 14px !important; } } .hero.hero-art .hero-art-caption { position: relative; right: auto; bottom: auto; z-index: 1; width: min(92%, 1600px); max-width: none; margin: 20px auto 0; text-align: left; color: rgba(255,255,255,.8); font-weight: 400; } .hero.hero-art .hero-art-caption .zh, .hero.hero-art .hero-art-caption .en { display: block; font-size: 12px; line-height: 18px; font-weight: 400; } .hero.hero-art .hero-art-caption .en { color: rgba(255,255,255,.7); } @media (max-width: 1100px) { .hero.hero-art .hero-art-caption { width: auto; margin: 12px 24px 0; } } @media (max-width: 560px) { .hero.hero-art .hero-art-caption { margin: 12px 16px 0; } } /* The 20 px above the caption is padding, not margin: on heroes that end with the .sub paragraph its bottom margin used to collapse into the caption margin and the hero came out 20 px lower than before the caption (technology 363 vs 383). */ @media (min-width: 1101px) { .hero.hero-art .hero-art-caption { margin-top: 0; padding-top: 20px; } } /* Household rows: block labels and the source link stay one line "中文 / English" (the .bi column otherwise stacks .en); list items use the same size as the paragraphs beside them. */ .hh-lbl .bi-inline > .zh, .hh-lbl .bi-inline > .en, .hh-media .photo-src a .bi-inline > .zh, .hh-media .photo-src a .bi-inline > .en { display: inline; margin: 0; } .hh-lbl .bi-inline > .en { font-size: 13px; color: var(--muted); } .hh-list .bi-unit > .zh { font-size: 14px; line-height: 1.6; } .hh-list .bi-unit > .en { font-size: 14px; line-height: 1.6; margin-top: 1px; } .hh-lbl .bi-inline { display: inline; } /* headings default to a zh / en column (style.css h4 .bi-inline) */ .hh-lbl .bi-inline .en { font-size: 13px; font-weight: 400; margin-top: 0; } /* Award photo credit when the photo is not from the company's original site (2025 100MVP row, user 03:06): small, muted, under the photo */ .awards-table .award-photo-src { display: block; margin-top: 4px; font-size: 12px; line-height: 1.45; color: var(--muted); font-weight: 400; font-style: normal; } .awards-table .award-photo-src .zh, .awards-table .award-photo-src .en { display: block; } /* About brand banner (user 04:13): the old water-splash image as a banner at its own ratio (1899 x 776), the original site's three hero lines centred on it in white over a light teal veil (image stays visible, not darkened out); grows taller and crops the image sides only when the text needs more room (phones), never the text. */ .brand-banner { position: relative; margin: 28px 0 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1899 / 776; min-height: 240px; display: flex; align-items: center; justify-content: center; text-align: center; } .brand-banner > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .brand-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,42,62,.42), rgba(6,42,62,.52)); } .brand-banner-text { position: relative; z-index: 1; padding: 28px 24px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.35); max-width: 900px; } .brand-banner-text p { margin: 0; } .brand-banner-text .zh, .brand-banner-text .en { display: block; } .brand-banner-text .en { color: rgba(255,255,255,.88); font-weight: 400; } .brand-banner .bb-l1 .zh { font-size: clamp(24px, 3.2vw, 40px); line-height: 1.3; font-weight: 700; letter-spacing: .04em; } .brand-banner .bb-l1 .en { font-size: clamp(14px, 1.4vw, 18px); line-height: 1.45; margin-top: 4px; } .brand-banner .bb-l2 { margin-top: 18px; } .brand-banner .bb-l2 .zh, .brand-banner .bb-l3 .zh { font-size: clamp(16px, 1.8vw, 22px); line-height: 1.5; font-weight: 600; letter-spacing: .06em; } .brand-banner .bb-l2 .en, .brand-banner .bb-l3 .en { font-size: clamp(13px, 1.2vw, 15px); line-height: 1.45; } .brand-banner .bb-l3 { margin-top: 10px; } @media (max-width: 720px) { .brand-banner { aspect-ratio: auto; } .brand-banner-text { padding: 32px 18px; } } /* stacking: image 0, veil 1, text 2 (the ::before veil came before the absolutely placed img and was painted under it) */ .brand-banner > img { z-index: 0; } .brand-banner::before { z-index: 1; } .brand-banner-text { z-index: 2; } .brand-banner-text .zh, .brand-banner-text .en { text-wrap: balance; } /* Same-level section titles (user 04:18, Codex measurement 68 px per bilingual h2): the title keeps its size / weight and zh-above-en order but gets its own tight leading instead of inheriting the 1.7 body leading -- zh 1.3, en 1.4, 2 px between. Title -> lead 10 px (rule above), lead zh/en 2 px, lead -> content 24 px; title with no lead -> first content 20 px, no empty lead as filler. Only h2.section-title (not hero, CTA band or footer headings); h3 keep their own level. */ h2.section-title .bi-inline .zh { line-height: 1.3; } h2.section-title .bi-inline .en { line-height: 1.4; margin-top: 2px; } h2.section-title { margin-bottom: 20px; } h2.section-title + * { margin-top: 0; } /* bilingual text blocks: the zh paragraph and its en paragraph are one unit -- 2 px apart, not 16 px browser margins collapsing between them; the unit keeps its normal spacing to the next paragraph. */ .bi-unit:not(.bi-inline) > p.zh { margin-bottom: 0; } .bi-unit:not(.bi-inline) > p.en { margin-top: 2px; } /* same tight leading for the other section-level h2 (closing CTA band titles), spacing of those bands unchanged */ section:not(.hero) h2 .bi-inline .zh { line-height: 1.3; } section:not(.hero) h2 .bi-inline .en { line-height: 1.4; margin-top: 2px; } /* title followed directly by running text (feature lists, FAQ) instead of a card edge: 12 px box gap so the first text line sits about as far below the title (~24 px) as a card edge does (20 px) */ h2.section-title:has(+ ul.bi-list), h2.section-title:has(+ .faq-list) { margin-bottom: 12px; } /* title followed directly by a table (first visible line = header text inside the 12 px cell padding): 8 px box gap -> ~20-24 */ h2.section-title:has(+ table) { margin-bottom: 8px; } @media (max-width: 720px) { h2.section-title:has(+ .milestones) { margin-bottom: 8px; } } /* visual-memory note right under the old-site banner (user 07:35): the 00:41 title (14 px) + narrative (12 px / 18 px) in full, small, normal flow, same left edge as the banner; zh / en lines 2 px apart */ .brand-banner-note { margin: 10px 0 0; color: var(--muted); font-weight: 400; } .brand-banner-note p { margin: 0; } .brand-banner-note .zh, .brand-banner-note .en { display: block; } .brand-banner-note .en { margin-top: 2px; } .brand-banner-note .bbn-title .zh { font-size: 14px; line-height: 20px; font-weight: 600; color: var(--ink); } .brand-banner-note .bbn-title .en { font-size: 13px; line-height: 18px; font-weight: 500; } .brand-banner-note .bbn-text { margin-top: 6px; } .brand-banner-note .bbn-text .zh, .brand-banner-note .bbn-text .en { font-size: 12px; line-height: 18px; } /* technology spinning-line diagram (user 12:50): the five step names under the drawing as one compact row, "中文 / English" */ .proc-steps { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 10px 0 0; padding: 0; list-style: none; counter-reset: ps; font-size: 14px; line-height: 1.5; } .proc-steps li { counter-increment: ps; } .proc-steps li::before { content: counter(ps) ". "; color: var(--muted); } .proc-steps .bi-inline > .zh::after { content: " /" / ""; font-weight: 400; opacity: .55; } .proc-steps .bi-inline > .en { font-size: 13px; color: var(--muted); } /* technology: two real close-ups under the spinning-line drawing (Codex 14:21) -- compact two columns, whole images at their own ratio, capped width; phones stack */ .proc-photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 760px; margin: 18px 0 0; } .proc-photos figure { margin: 0; } .proc-photos img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--border); } .proc-photos figcaption { margin-top: 6px; font-size: 14px; line-height: 1.5; } .proc-photos figcaption .bi-inline > .zh::after { content: " /" / ""; font-weight: 400; opacity: .55; } .proc-photos figcaption .bi-inline > .en { font-size: 13px; color: var(--muted); } @media (max-width: 560px) { .proc-photos { grid-template-columns: minmax(0, 1fr); } }