@charset "utf-8"; /* ========================================================================== 20_painfree — SHARED "modern content" layer tc/css/modern.css ========================================================================== One reusable design system for the Chinese pages, so a revamp is not a per-page copy-paste. Load order: .css -> mobile.css -> modern.css How to adopt it on another page ------------------------------ 1. (after the page bundle) 2. Add `pg-modern` to the class. This is REQUIRED for the shared-chrome rules (the #menu sidebar) - those are scoped to body.pg-modern on purpose, because the legacy sidebar of some pages still carries #btn1-#btn6 icon backgrounds that the modern list style would strip. 3. Mark up content with the components below. Every component lives under `.con`, so it is inert until the markup actually uses the class - loading this file cannot restyle a page on its own. Component reference ------------------- .page-title .lede page intro (h1 + standfirst) .sec-hdg section heading, accent bar + fading rule .card-grid (+ .numbered) responsive card grid, optional 01..0n badge .card .card-op card; .card-op is a procedure card .op-stats .op-stat .op-lab .op-val 3 key metrics as a stat strip .op-notes labelled attribute list (dt/dd) .fig .fig-row .fig-block figures beside text / full width .cta-row .cta-tel .cta-wa conversion buttons .more-link trailing "see also" line .m-note call-out / notice box .m-table opt-in modern table ========================================================================== */ :root{ --m-primary:#2f829b; --m-primary-dk:#0f4d60; --m-primary-lt:#eaf4f7; --m-accent:#98b83b; --m-accent-lt:#f2f7e4; --m-wa:#1faa52; --m-wa-dk:#17853f; --m-ink:#1f3038; --m-body:#4a5a61; --m-muted:#7f8b91; --m-line:#dfeaee; --m-line-soft:#edf5f7; --m-surface:#fbfeff; --m-surface-2:#f5fafb; --m-r-sm:8px; --m-r-md:12px; --m-r-lg:16px; --m-sh-1:0 1px 2px rgba(16,60,74,.05); --m-sh-2:0 4px 16px rgba(16,60,74,.07); --m-sh-3:0 10px 28px rgba(16,60,74,.10); --m-font:"新細明體","Microsoft JhengHei","PingFang TC","Noto Sans TC",Arial,Helvetica,sans-serif; } /* ---------------------------------------------------------------- reading rhythm The legacy bundles had no rhythm at all: paragraphs butted together with no bottom spacing, so a wall of text read as one block. */ .con{ color:var(--m-body); font-size:16px; line-height:1.9; } .con p{ line-height:1.9; padding:0 0 16px; text-justify:inter-ideograph; } .con p:last-child{ padding-bottom:0; } .con strong{ font-weight:700; } /* ---------------------------------------------------------------- page intro */ .con .page-title{ font-family:var(--m-font); font-size:clamp(22px,4.4vw,30px); font-weight:700; color:var(--m-primary-dk); line-height:1.3; letter-spacing:.01em; margin:0; padding:0 0 16px; position:relative; } /* a short accent bar reads as deliberate; the old full-width 3px grey border did not */ .con .page-title::after{ content:""; position:absolute; left:0; bottom:0; width:64px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--m-accent),var(--m-primary)); } .con .lede{ font-size:17px; line-height:1.9; color:#3d4d54; padding:18px 0 6px; max-width:64ch; } /* ---------------------------------------------------------------- section headings Text, not a 336x23px bitmap strip: selectable, searchable, translatable, and sharp at any pixel density. */ .con .sec-hdg{ position:relative; display:block; margin:38px 0 18px; /* The legacy page bundles carry `.con h2{height:24px}` - a leftover from when every heading was a fixed-size bitmap strip. Left in place it clamps the box to 24px while line-height is 26-29px, so the text overflows its own box and the ::after rule below strikes straight through the glyphs. Specificity (0,2,0) beats `.con h2` (0,1,1), so this also fixes every page that adopts modern.css. */ height:auto; min-height:0; padding:3px 0 13px 19px; font-family:var(--m-font); font-size:20px; font-weight:700; color:var(--m-primary-dk); line-height:1.45; letter-spacing:.01em; } .con .sec-hdg::before{ content:""; position:absolute; left:0; top:4px; width:5px; border-radius:3px; height:calc(100% - 17px); background:linear-gradient(180deg,var(--m-accent),var(--m-primary)); } .con .sec-hdg::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:linear-gradient(90deg,#cfe3ea 0%,rgba(207,227,234,0) 78%); } /* kept for the pages whose original bitmap rule was 500px wide (the RFA strip) */ .con .sec-hdg-500::after{ background:linear-gradient(90deg,#cfe3ea 0%,rgba(207,227,234,0) 92%); } .con strong.sec-sub{ font-weight:700; color:var(--m-primary-dk); } /* The same legacy `height:24px` clamp also applies to any content heading that is NOT a .sec-hdg. At phone widths those headings wrap to two lines while still clamped to 24px, so the text spills out of its box and overlaps whatever follows (index.htm had 4 of them at 390px). Same fix, applied to every content heading. Scoped to `.con`, so the legacy sidebar headings (#menu ul li h1, which legitimately carry a fixed-height background image) are untouched. */ .con h1, .con h2, .con h3, .con h4, .con h5, .con h6{ height:auto; min-height:0; } /* ---------------------------------------------------------------- cards */ .con .card-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; padding:0 0 30px; align-items:stretch; } .con .card{ position:relative; margin:0; background:#fff; border:1px solid var(--m-line); border-radius:var(--m-r-md); padding:18px 18px 20px; box-shadow:var(--m-sh-1); } .con .card h3{ font-family:var(--m-font); font-size:16.5px; font-weight:700; color:var(--m-primary-dk); line-height:1.5; margin:0 0 10px; padding:0 0 10px; border-bottom:1px solid var(--m-line-soft); } .con .card h3 .aka{ font-size:12px; font-weight:400; color:var(--m-muted); margin-left:6px; } .con .card p{ font-size:15px; line-height:1.85; color:var(--m-body); padding:0 0 10px; text-align:left; /* counter `.con div p{position:absolute;height:3px;width:3px}` from p_index.css, which was written for the 3px corner-decoration paragraphs but matches every p inside a div */ position:static; height:auto; width:auto; } /* optional 01..0n badge - ordinal only, carries no ranking of its own */ .con .card-grid.numbered{ counter-reset:mcard; } .con .card-grid.numbered > .card{ counter-increment:mcard; padding-left:58px; } .con .card-grid.numbered > .card::before{ content:counter(mcard,decimal-leading-zero); position:absolute; left:18px; top:18px; width:27px; height:27px; display:flex; align-items:center; justify-content:center; border-radius:9px; font-family:Arial,Helvetica,sans-serif; font-size:12px; font-weight:700; letter-spacing:.02em; color:var(--m-primary-dk); background:var(--m-primary-lt); } /* ------------------------------------------------- procedure cards (.card-op) .card-grid.ops is single-column on purpose: at the 725px desktop content width a 2-up grid stretched the shorter card into a tall empty box and orphaned the third. Full width also keeps each stat value on one line. */ .con .card-grid.ops{ grid-template-columns:1fr; gap:18px; } /* The three procedures are the decision content, so the three comparable numbers are lifted out of the prose into a stat strip and the two descriptive attributes stay as labelled notes underneath. Same words, readable shape. */ .con .card-op{ display:flex; flex-direction:column; } .con .op-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:14px 0 0; padding:0; } .con .op-stat{ background:var(--m-surface-2); border:1px solid var(--m-line-soft); border-radius:var(--m-r-sm); padding:11px 8px; text-align:center; min-width:0; } .con .op-lab{ display:block; font-size:11.5px; line-height:1.5; color:var(--m-muted); } .con .op-val{ display:block; font-size:14.5px; font-weight:700; line-height:1.5; color:var(--m-primary-dk); padding:3px 0 0; overflow-wrap:break-word; } .con .op-notes{ margin:16px 0 0; padding:14px 0 0; border-top:1px solid var(--m-line-soft); } .con .op-notes dt{ font-size:12px; line-height:1.6; color:var(--m-muted); padding:9px 0 2px; } .con .op-notes dt:first-child{ padding-top:0; } .con .op-notes dd{ margin:0; font-size:14.5px; line-height:1.8; color:var(--m-body); text-align:left; } /* ---------------------------------------------------------------- figures */ .con .fig{ margin:0 0 18px; padding:0; } .con .fig img{ display:block; width:100%; max-width:248px; height:auto; background:#fff; border:1px solid var(--m-line); border-radius:var(--m-r-sm); } .con .fig figcaption{ font-size:12.5px; line-height:1.7; color:var(--m-muted); padding:8px 0 0 10px; margin:0; max-width:248px; border-left:2px solid var(--m-line-soft); } .con .fig-block{ margin:0 0 24px; } /* Above phone width EVERY figure is 248px, so the standalone block figure must not stretch to the full column. mobile.css carries `#conent img{max-width:100%!important}` which beat the old 248px cap, inflating this one image to the entire content width on tablet (857px at a 900px viewport, 1004px at 1049px) while the .fig-row figures stayed 248px - and on desktop it is 248px. Needs !important plus a higher specificity to win; phones keep the full-width treatment. */ @media (min-width:577px){ #conent .fig-block img{ max-width:248px!important; } } /* a float would be overlapped by the card grid below it, so the figure+text pairing is an explicit flex row and the grid always gets the full width */ .con .fig-row{ display:flex; gap:24px; align-items:flex-start; padding:0 0 26px; } .con .fig-row .fig{ flex:0 0 248px; margin:0; } .con .fig-row .fig-text{ flex:1 1 auto; min-width:0; } /* ---------------------------------------------------------------- conversion */ .con .cta-row{ clear:both; display:flex; flex-wrap:wrap; gap:12px; padding:10px 0 22px; } .con .cta-row a{ display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 26px; border-radius:var(--m-r-sm); text-decoration:none; font-family:var(--m-font); font-size:15.5px; font-weight:700; color:#fff!important; box-shadow:var(--m-sh-1); transition:background .18s ease, box-shadow .18s ease; } .con .cta-tel{ background:var(--m-primary); } .con .cta-tel:hover{ background:var(--m-primary-dk); box-shadow:var(--m-sh-2); } .con .cta-wa{ background:var(--m-wa); } .con .cta-wa:hover{ background:var(--m-wa-dk); box-shadow:var(--m-sh-2); } .con .more-link{ font-size:14.5px; line-height:1.85; color:var(--m-muted); padding:0 0 22px; } .con .more-link a{ color:var(--m-primary); font-weight:700; } /* ---------------------------------------------------------------- reusable extras */ .con .m-note{ background:var(--m-surface-2); border:1px solid var(--m-line); border-left:4px solid var(--m-primary); border-radius:var(--m-r-sm); padding:14px 16px; margin:0 0 22px; font-size:14.5px; line-height:1.8; color:var(--m-body); } .con .m-note p:last-child{ padding-bottom:0; } .con table.m-table{ width:100%; border-collapse:collapse; font-size:14.5px; margin:0 0 24px; } .con table.m-table th, .con table.m-table td{ border:1px solid var(--m-line); padding:10px 12px; text-align:left; vertical-align:top; line-height:1.75; } .con table.m-table th{ background:var(--m-surface-2); color:var(--m-primary-dk); font-weight:700; } /* accent bullet list - for runs of short feature sentences that have no titles of their own, where a card grid would leave the cards titleless */ .con .m-list{ list-style:none; margin:0 0 26px; padding:0; display:grid; gap:11px; } .con .m-list li{ position:relative; padding:0 0 0 26px; /* the legacy `.con ul li{background:url(list_point.webp)}` supplies its own bullet, which showed as a second mark overlapping the accent dot */ background:none; font-size:15.5px; line-height:1.85; color:var(--m-body); text-align:left; } .con .m-list li::before{ content:""; position:absolute; left:5px; top:11px; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--m-accent),var(--m-primary)); } /* plain content image - framed and rounded, but with no caption of its own */ .con .m-img{ display:block; max-width:100%; height:auto; margin:0 0 24px; border:1px solid var(--m-line); border-radius:var(--m-r-sm); background:#fff; } /* press-clipping grid: thumbnail + outlet name, one card per clipping */ .con .m-press{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:14px; padding:0 0 28px; } .con .m-press a{ display:block; text-decoration:none; overflow:hidden; background:#fff; border:1px solid var(--m-line); border-radius:var(--m-r-sm); box-shadow:var(--m-sh-1); transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .con .m-press img{ display:block; width:100%; height:auto; } .con .m-press span{ display:block; padding:8px 10px; border-top:1px solid var(--m-line-soft); font-size:12.5px; line-height:1.55; color:var(--m-muted); } @media (hover:hover){ .con .m-press a:hover{ box-shadow:var(--m-sh-2); border-color:#c6dfe7; transform:translateY(-2px); } } @media (prefers-reduced-motion:reduce){ .con .m-press a{ transition:none; } .con .m-press a:hover{ transform:none; } } /* small attention sub-line - e.g. the MTR-exit note under a clinic address */ .con .m-sub{ font-size:13px; line-height:1.7; color:#b0504a; margin:0; padding:0 0 10px; text-align:left; } /* map icon link inside an address card */ .con .addr-map{ margin:0; padding:0; line-height:0; } .con .addr-map img{ display:inline-block; border:0; border-radius:4px; } /* ------------------------------------------------- compact card variants The contact page reads better dense: four details across one row, and the map icon pinned into the address card's corner so it adds no vertical height. */ .con .card-grid.tight{ grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; padding:0 0 22px; } .con .card.detail{ padding:13px 15px 15px; } .con .card.detail h3{ font-size:12px; font-weight:700; letter-spacing:.05em; color:var(--m-muted); border-bottom:0; margin:0 0 5px; padding:0; } .con .card.detail p{ font-size:16.5px; font-weight:700; color:var(--m-primary-dk); padding:0; line-height:1.5; overflow-wrap:anywhere; } .con .card.detail p a{ color:var(--m-primary); } .con .card.addr{ padding:13px 64px 14px 15px; } .con .card.addr h3{ margin:0 0 6px; padding:0; border-bottom:0; font-size:15px; } .con .card.addr .m-sub{ padding:0; } .con .card.addr .addr-map{ position:absolute; top:12px; right:14px; } /* ------------------------------------------------- ONE content column (desktop only) The legacy per-page bundles each sized the content column for a 980px fixed layout and disagree with each other: hernia / minor / foreskin / thyroid `.con{... width:735px}` faq / media `.con{... width:725px}` index `.con{... width:335px}` + `#con2{padding:0 0 0 66px}` contact `.con` carrying 70px of left padding and faq additionally pins its paragraphs to `width:757px`, which ran 32px past its own column and 19px past the page container - so on faq the body text stuck out to the right of the nav / hero / header above it, and 中心環境 on index sat 40px inset of the other sections because only #con2 carried the extra 40px of padding. Everything below fills from beside the 216px sidebar to the wrapper's right edge (216 + 764 = the 980px wrapper) and makes paragraphs fluid, so on EVERY page the body text starts and ends on the same two vertical lines as the chrome. Scoped to desktop: the narrower tiers already set `.con{float:none;width:100%;padding-left:0}`. */ @media (min-width:1050px){ #con, #con2, .con{ float:none!important; width:auto!important; margin-left:216px!important; } /* faq's `.con p{width:757px}` / `.con p#p{width:757px}` and media's 725px are legacy fixed widths that overflow. Use max-width ONLY, never width:auto - some paragraphs are deliberately narrow because that IS their reservation for a decorative background graphic on their parent block: .con #Div1{background:url(img01.jpg) no-repeat right top} .con #Div1 p{width:467px} <- the clearance, not a layout choice Forcing width:auto made #Div1's paragraphs 738px and printed the text over the image (minor, thyroid, foreskin). max-width:100% clamps 757 -> 738 on faq while leaving 467 alone, because 467 is already narrower than the column. The #Div2..#Div6 blocks reserve with padding instead, which auto width respects. */ .con p{ max-width:100%!important; } /* index: `#con2{padding:0 0 0 66px}` against #con's 26px is what inset 中心環境. */ body.pg-index #con2{ padding-left:26px!important; } body.pg-index #con, body.pg-index #con2{ float:none!important; width:auto!important; margin-left:216px!important; } body.pg-contact #menu{ width:216px!important; } /* contact: put the shared 26px left padding back. It was never the padding that broke the layout - the legacy value was 70px, which made the column too wide to fit beside the sidebar and wrapped it below. With the padding at 26px its cards start on the same line as every other page's text. */ body.pg-contact #con{ float:none!important; width:auto!important; margin-left:216px!important; padding-left:26px!important; } } /* ------------------------------------------------- footer alignment (desktop only) The footer is three rows on three different alignment systems: nav row (關於我們 … 聯絡我們) centred inside the 980px footer 健康資訊 row a `width="771"` legacy table pinned to the LEFT edge, leaving 209px of dead space on the right copyright / Web Design the full 980px, pushed to left and right edges Measured at 1280px on all ten pages: the nav row's centre is 629 = the container's centre, but the 健康資訊 table spans only 139→910 while the row below spans 139→1119. That left-anchored middle row is what reads as misaligned. Give all three the same width and centre the health-info items so the middle row sits symmetrically under the centred nav row. Second fix: the run of empty

spacers that pushes the nav row down is 2–6 paragraphs depending on the page (measured: index 3, hernia 2, media 6, contact 0, thankyou 0), so the nav row sat up to 126px lower on some pages than others. One fixed padding replaces them. `:has()` degrades gracefully — a browser that does not support it simply ignores this one rule and keeps today's behaviour. */ @media (min-width:1050px){ #footer table, #footer tbody, #footer tr{ width:100%!important; text-align:center!important; } #footer table td{ padding:0 5px!important; } #bottommenu p:not(:has(a)){ display:none; } #bottommenu{ padding:30px 0 10px; } /* contact.htm is the odd one out: its #bottommenu and #footer are children of instead of the centred #warpper (all nine other pages nest them in #warpper). So on that page the whole footer sat at the viewport's left edge - #footer x=0/w=980 while #warpper and .eeat are at x=139. Centre the 980px box so the copyright row and the 健康資訊 table line up with the rest of the page. #bottommenu already spans the full width and centres its links via text-align. */ body.pg-contact #footer{ margin-left:auto!important; margin-right:auto!important; } } /* contact.htm is the only page whose #bottommenu, #footer AND .eeat are NOT inside the centred #warpper, so below desktop they spanned the whole viewport while every other page's sit inside the wrapper's side padding: #footer x=0 w=368 against the content box x=10 w=348 (at 390px) .eeat x=0, flush to the left edge, against x=10 (the other nine pages all give it --warp-pad of breathing space each side) Match the wrapper's content box using the same --warp-pad variable that drives the wrapper itself (10px <=576, 12px 577-767, 14px 768-1049). .eeat needs max-width:none because its own max-width:980px would otherwise bite between 980 and 1049px. */ @media (max-width:1049.98px){ body.pg-contact #footer, body.pg-contact #bottommenu, body.pg-contact .eeat{ width:auto!important; max-width:none!important; margin-left:var(--warp-pad)!important; margin-right:var(--warp-pad)!important; } } /* .eeat carries `max-width:980px; margin:16px auto 0`. That max-width bites between 980 and 1049px, where the wrapper's content is wider than 980: on the pages whose .eeat is a child of the wrapper (faq, media) it then centred itself inside the column (left 34.5 vs the column's 14 at 1049px) while #con filled it. Let it fill the column like everything else. Above 1050px the wrapper is exactly 980px wide, so this is a no-op there. */ @media (min-width:768px) and (max-width:1049.98px){ .eeat{ max-width:none!important; } } /* ------------------------------------------------- legacy `.con div` traps p_index.css carries two rules written for the old 327px image-wrapper divs: .con div { position:relative; border:1px solid #d3d3d3; width:327px; margin:0 0 26px } .con div p{ position:absolute; height:3px; width:3px; padding:0; margin:0 } The first pins every div under .con - including these grids - to 327px with a stray border. The second was meant for the 3px corner-decoration paragraphs but matches EVERY paragraph inside a div under .con, collapsing card body text into a 3x3 box. Both are neutralised here for the components. */ .con .card-grid, .con .m-press, .con .op-stats, .con .op-stat, .con .m-table, .con .m-note, .con .m-row, .con .m-col{ position:static; width:auto; max-width:100%; border:0; } /* `.con div p` (the 3px corner-decoration rule) also matches every paragraph inside the new section wrappers, so reset those too - and `.con ul{width:301px}` had pinned the environment list to 301px inside a 698px column. */ .con .m-row p, .con .m-col p{ position:static; height:auto; width:auto; } .con .m-list{ width:auto; max-width:100%; } /* ------------------------------------------------- section pairing (opt-in) Markup:

...

Index's sections are short and complementary, so above the tablet-portrait tier two of them share a row instead of stacking. Measured A/B in one session (same viewport, pairing toggled at runtime): 184px saved at 768, 213px at 900 and 242px - 8.3% of the page - at 1050/1280. Below 768px it stacks, and the height is identical to the original because .m-row is display:block there. Below the threshold use display:BLOCK, not a single-column grid: a grid container stops its children's margins collapsing, which made the page ~100px taller at 600px. Block restores the original rhythm exactly. */ .con .m-row{ display:block; margin:0; } .con .m-row > .m-col{ min-width:0; } @media (min-width:768px){ .con .m-row{ display:grid; grid-template-columns:1fr 1fr; column-gap:34px; align-items:start; margin:38px 0 0; } /* Zeroing the first heading's own top margin is what puts both column headings on the same line - otherwise the shorter column's heading sits lower than its pair. */ .con .m-row > .m-col > .sec-hdg:first-child{ margin-top:0; } /* narrow columns: justified CJK leaves ragged gaps (same reason as .card-op) */ .con .m-row p{ text-align:left; } } /* ---------------------------------------------------------------- interaction */ @media (hover:hover){ .con .card{ transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .con .card:hover{ box-shadow:var(--m-sh-2); border-color:#c6dfe7; transform:translateY(-2px); } } .con a:focus-visible{ outline:3px solid #9fd0e0; outline-offset:2px; border-radius:4px; } @media (prefers-reduced-motion:reduce){ .con .card, .con .cta-row a{ transition:none; } .con .card:hover{ transform:none; } } /* ------------------------------------------------- shared chrome: sidebar TOC Scoped to body.pg-modern so pages still using the legacy #btn1-#btn6 icon backgrounds keep their icons. */ body.pg-modern #menu ul li a{ display:block; box-sizing:border-box; width:auto; height:auto; padding:7px 11px; margin:0; border-radius:7px; font-family:var(--m-font); font-size:14.5px; line-height:1.55; font-weight:400; /* !important: the legacy `#menu ul li #btnN` icon rules are (2,0,2) and would otherwise outrank this (1,1,4) selector, leaving the dated 19x19 gif bullets */ color:#4a5a61; background:none!important; text-decoration:none; transition:background .15s ease, color .15s ease; } body.pg-modern #menu ul li a:hover{ background:var(--m-primary-lt)!important; color:var(--m-primary-dk)!important; } body.pg-modern #menu ul li{ margin:2px 0; } body.pg-modern #menu ul li#listtop{ margin:0 0 8px; } body.pg-modern #menu ul li .side-label{ display:block; font-family:var(--m-font); font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--m-muted); line-height:1.5; padding:0 0 8px; border-bottom:1px solid var(--m-line); margin:0 0 2px; } /* ---------------------------------------------------------------- phones */ @media (max-width:576.98px){ .con .sec-hdg{ font-size:18px; margin:30px 0 15px; padding:2px 0 11px 16px; } .con .page-title{ font-size:23px; } .con .lede{ font-size:16px; padding:15px 0 4px; } /* don't float the figure beside the text - they crowd each other */ .con .fig-row{ display:block; } .con .fig-row .fig{ flex:none; } .con .fig img, .con .fig figcaption{ max-width:100%; } .con .card-grid{ grid-template-columns:1fr; gap:14px; } /* two across on phones, not three: a 3-up row is ~110px per card and an address like info@painfree.hk then breaks mid-string */ .con .card-grid.tight{ grid-template-columns:repeat(2,1fr); gap:10px; } .con .card-grid.numbered > .card{ padding-left:54px; } /* one metric per row, label left / value right - reads far better than 3 columns. The grid MUST drop to a single column as well: leaving it at 3 columns squeezes each flex row into a third of the width, so labels break mid-word (復發 / 率). */ .con .op-stats{ grid-template-columns:1fr; gap:7px; } .con .op-stat{ display:flex; align-items:baseline; justify-content:space-between; text-align:left; } .con .op-lab{ font-size:12.5px; } .con .op-val{ padding:0 0 0 10px; font-size:15px; } .con .cta-row a{ flex:1 1 100%; } }