/* ============================================================ WithYing fix patch v1.3 · 2026-07-15 Where: WP Admin → Appearance → Customize → Additional CSS Rules: - Paste this file as-is. Do NOT change any other visual style. - Selectors are verified against the live DOM; they work as-is. - Sections A–G are independent. After each section, send a screenshot of that area for sign-off. - If something looks off, message first, don't improvise. ============================================================ */ /* ---- A · Global type base (the single most important line) -- prototype-core.css sets html to 18px; the whole site is rem-based so everything inflated by 12.5%. Base is 16px. */ html { font-size: 16px !important; } /* ---- B · Nav links ------------------------------------------ 16px reads like body copy. 13px + tracking = quiet label. Leave the dark "預約策略診斷" button untouched. */ .nav-links a { font-size: 13px !important; font-weight: 400; letter-spacing: 2.5px; padding-block: 12px; /* same look, larger hit area */ } /* ---- C · Homepage hero -------------------------------------- */ .hero-title { font-size: 60px; /* was 68px */ line-height: 1.3; /* was 1.12, too tight */ letter-spacing: 2px; text-wrap: balance; /* fixes the bad line break in 做成一門好生意 */ } .hero-eyebrow { font-size: 12px; /* was 14px */ font-weight: 400; color: rgba(250,249,246,.65); text-shadow: 0 1px 8px rgba(28,26,20,.5); /* small text over photo */ } @media (max-width: 768px) { .hero-title { font-size: 34px; } } /* ---- D · Section headings: one size site-wide --------------- All four are currently 58px (same level as the hero H1). 42px everywhere: still bold and clear, but yields to the hero. */ .about-title, .worlds-title, .posts-title, .svc-title { font-size: 42px; } /* ---- E · "看全部" and secondary links back to text style ----- The solid dark button is reserved for the primary CTA only. */ .btn-text { background: transparent; color: #9e4a1e; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; border: none; border-bottom: 1px solid rgba(158,74,30,.35); border-radius: 0; padding: 0 0 2px; } /* ---- F · Pills and coming-soon cards ------------------------ No solid-fill pills, no dashed borders. Hairline outline pill; "coming soon" = whole card faded. */ .services-overview-soon-badge { background: transparent; border: 1px solid rgba(28,26,20,.2); color: #68645d; } .services-overview-soon-card { border-style: solid; border-color: rgba(28,26,20,.08); opacity: .45; } .svc-card--soon { /* homepage coming-soon card (dashed) */ border-style: solid; border-color: rgba(250,249,246,.12); opacity: .45; } .svc-type--soon { /* its 即將推出 chip: quiet, no solid fill */ background: rgba(250,249,246,.06); color: rgba(250,249,246,.6); border: none; } .hero-badge { /* "給一人公司老闆" pill on /marketing-service/ */ background: transparent; border: 1px solid rgba(158,74,30,.35); color: #9e4a1e; border-radius: 999px; font-size: 12px; font-weight: 400; letter-spacing: 2px; } /* ---- G · Footer: KEEP dark bg + 4-column layout. ------------- Only the vocabulary goes back to the design system: type tiers, 2px radius, sand reserved for the CTA. Do not touch the background gradient or the column grid. */ .withying-site-footer .footer-logo { font-size: 20px; /* was 30px */ color: rgba(250,249,246,.9); } .withying-site-footer .footer-brand-divider, .withying-site-footer .footer-brand-notes { display: none; } /* gold bar + icon chips */ .withying-site-footer .footer-bio { font-size: 13px; color: rgba(250,249,246,.72); } .withying-site-footer .footer-heading { font-size: 12px; font-weight: 500; letter-spacing: 3px; text-transform: uppercase; color: rgba(250,249,246,.65); /* was sand — sand is for CTAs only */ } .withying-site-footer .footer-heading::after { content: none; } /* gold bar if pseudo */ .withying-site-footer .footer-links a { font-size: 14px; font-weight: 400; color: rgba(250,249,246,.72); border-bottom: none; } .withying-site-footer .footer-social-icon { /* keep icons, quiet them */ border-radius: 2px; /* was 6px */ border: 1px solid rgba(250,249,246,.2); /* was gold */ color: rgba(250,249,246,.72); } .withying-site-footer .footer-social, .withying-site-footer .footer-social-label { font-size: 12px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(250,249,246,.72); border-bottom: none; } .withying-site-footer .footer-cta-body { font-size: 13px; color: rgba(250,249,246,.72); } .withying-site-footer .footer-cta-btn { background: transparent; border: 1px solid rgba(232,213,176,.4); border-radius: 2px; /* was 8px — site allows 2px + pill only */ color: #e8d5b0; font-size: 12px; font-weight: 500; letter-spacing: 2px; padding: 11px 22px; min-height: 44px; } .withying-site-footer .footer-bottom, .withying-site-footer .footer-bottom a { font-size: 12px; color: rgba(250,249,246,.6); letter-spacing: 1px; } .withying-site-footer .footer-bottom { border-top: 1px solid rgba(250,249,246,.08); } /* Newsletter: NO email input in the footer (decided — the form stays off until the Kit bug is resolved). It's a text CTA linking to the existing subscribe destination instead: */ .withying-site-footer .footer-nl-link { display: inline-block; margin-top: 14px; color: #e8d5b0; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-decoration: none; border-bottom: 1px solid rgba(232,213,176,.4); padding-bottom: 2px; } /* ============================================================ H · UNIFIED TYPE SCALE v1.3 — single source of truth. If any text on any page doesn't match one of these roles, it's a bug. Ask before inventing a new size. ROLE SIZE / WEIGHT / NOTES Homepage hero H1 60 / 600 serif · lh 1.3 (mobile 34) Inner-page hero H1 48 / 600 serif · lh 1.3 Section heading H2 42 / 600 serif · ls 2px (all pages) Card title H3 20 / 600 serif Post/article card title 18 / 600 serif · lh 1.55 Body 16 / 300 · lh 1.8 Body small / excerpts 14 / 300 · muted #68645d Card list items (dark) 14 / 400 · rgba(250,249,246,.72) Nav links 13 / 400 · ls 2.5px Eyebrow / labels 12 / 400 (dark bg: 12 / 500 · α .65) Dates · tags · meta 12 / 400 · ls 2px · muted Text-link CTA 12 / 500 · ls 2px + hairline underline Buttons 12 / 500 · ls 2px · radius 2px · min-h 44 Fine print 12 / 400 (dark bg: α .6) Floors: nothing below 12px. Only ≥14px may use weight 300. ============================================================ */ /* Inner-page heroes (currently 68px, same as homepage hero) */ .blog-title { font-size: 48px; } /* Any other inner-page h1 (e.g. /marketing-service/ hero): also 48px. Same rule, whatever its class is. */ /* Section headings missed by section D (page-specific classes) */ .section-title, .services-overview-section-title, .services-overview-newsletter-title { font-size: 42px; } /* Any other 58px h2 you find on any page: same rule, 42px. */ /* Sticky header: the design nav is position:sticky (homepage still has it); inner-page headers lost it. Every page header must stay pinned: */ header[class*="page-header"] { position: sticky; top: 0; z-index: 100; background: rgba(243,240,235,.95); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(28,26,20,.08); } /* ---- I · Blog page: stray hairlines + tab row --------------- Target look: exactly ONE hairline under the tab row. The 460px rule after "精選文章" is foreign — remove it. */ .filter-tabs { font-size: 14px; margin-bottom: 64px; } .featured-label { font-size: 12px; letter-spacing: 4px; } .featured-label::after { content: none; } /* If a second full-width line still shows between the tabs and 精選文章, it's a section border-top — delete that rule too. */ /* ---- J · Blog cards: weight hierarchy ------------------------ The date currently outweighs the title. Order must be: title (darkest/boldest) → excerpt → category/date (lightest). */ .post-title { font-size: 18px; font-weight: 600; line-height: 1.55; } .post-excerpt, .featured-excerpt { font-size: 14px; font-weight: 300; color: #68645d; } .post-date { font-size: 12px; font-weight: 400; letter-spacing: 2px; color: #68645d; } .featured-date { font-size: 12px; } /* was 10px — below the floor */ /* ---- K · Services overview page ------------------------------ */ .services-overview-product-title { font-size: 20px; } /* was 22–26px */ .services-overview-product-card { padding: 32px 28px; } .services-overview-product-price { font-size: 18px; font-weight: 600; } .services-overview-product-card__number { font-size: 12px; color: #68645d; } /* "上線通知我" is a secondary action on a coming-soon card — a solid dark button is too loud. Text-link style: */ .services-overview-soon-notify { background: transparent; color: #9e4a1e; font-size: 12px; font-weight: 500; letter-spacing: 2px; border: none; border-bottom: 1px solid rgba(158,74,30,.35); border-radius: 0; padding: 0 0 2px; } /* ---- L · Marketing-service page ------------------------------ */ .case-stat-num { font-family: "Noto Serif TC", Georgia, serif; font-size: 28px; color: #9e4a1e; } .case-stats > * { /* grey boxes → editorial hairline top */ background: transparent; border-top: 1px solid rgba(28,26,20,.12); padding: 14px 4px 0; } .case-stat-label { font-size: 12px; color: #68645d; } .btn--ghost { box-shadow: none; } /* About page skill tags (行銷策略 / 品牌定位 …), dark section: */ .about-tag { background: transparent; border: 1px solid rgba(250,249,246,.18); color: rgba(250,249,246,.72); font-size: 12px; font-weight: 400; border-radius: 999px; } /* Dark newsletter band before the footer: heading uses the H2 role (42px), subline 14px rgba(250,249,246,.72), fine print 12px α .6. The solid terracotta 訂閱 button is correct — keep, just ensure min-height 44px / radius 2px. */ /* ---- M · About page (/about/): restore the film-strip pacing -- This page is a life told in chapters. In the design, chapter titles are deliberately SMALL (28px) and each chapter is one contained frame (~520px), so scrolling feels like moving along a timeline. The current 58px titles turn every chapter into a shouting hero section. 28px here is intentional — it is the ONE exception to the 42px H2 rule. Do not "correct" it upward. */ .story-hero__title { font-size: 52px; } /* was 68px */ .story-chapter__title { font-size: 28px; letter-spacing: .5px; line-height: 1.4; } /* was 58px */ /* Numbers block ("用數字認識我"), per the design file: big number 52px serif (its unit span 28px, accent #9e4a1e), label 13px, story note 12px muted. Apply to the value element whatever its class is. */ .story-numbers__label { font-size: 13px; } /* Scroll-reveal (see footer-edits.html EDIT 4 for the 8-line JS): chapters and number items fade+rise once on scroll-into-view. The old build had this; the current one only animates on hover, which reads as broken. */ .story-chapter, .story-numbers__item { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; } .story-chapter.is-visible, .story-numbers__item.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .story-chapter, .story-numbers__item { opacity: 1; transform: none; transition: none; } } /* Reading measure: long-form paragraphs cap at ~34 CJK chars per line. Applies to chapter text now; reuse the same value for article pages later. */ .story-chapter p { max-width: 34em; } /* ---- N · Service-card include lists (styles only) ------------ Copy is coming from Ying as a small follow-up: each service card gets a 2–3 line "what's included / who it's for" list. When you receive it, add it as a