/* ========================================================================== aichat360 — shared platform styles Per-company theming: set --primary / --accent on or inline style; everything below reads the CSS variables. ========================================================================== */ :root{ --primary:#0b6e99; --primary-dark:#075066; --accent:#c9a35b; --ink:#1f2733; --muted:#5b6776; --line:#e3e8ef; --soft:#f4f7fb; --bg:#eef2f7; --card:#ffffff; --ok:#1f9d6b; --danger:#c0444b; --radius:16px; --shadow:0 6px 24px rgba(31,39,51,.08); --maxw:880px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; color:var(--ink); background:linear-gradient(180deg,#eef2f7,#e7ecf3); font-family:-apple-system,"Segoe UI","Microsoft JhengHei","PingFang TC","Noto Sans TC",sans-serif; line-height:1.8; font-size:16.5px; -webkit-font-smoothing:antialiased; } a{color:var(--primary); text-decoration:none} a:hover{text-decoration:underline} .wrap{max-width:var(--maxw); margin:0 auto; padding:28px 20px 80px} /* ── top bar ─────────────────────────────────────────── */ .topbar{display:flex; align-items:center; justify-content:space-between; max-width:var(--maxw); margin:0 auto; padding:16px 20px} .brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--ink)} .brand .logo{display:inline-grid; place-items:center; width:34px; height:34px; border-radius:9px; background:var(--primary); color:#fff; font-size:15px; font-weight:800} .brand .sub{font-size:12px; color:var(--muted); font-weight:600} .who{font-size:13px; color:var(--muted); display:flex; align-items:center; gap:10px} .who button{font:inherit} /* ── buttons ─────────────────────────────────────────── */ .btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; border:1px solid transparent; border-radius:11px; padding:12px 20px; font-size:15.5px; font-weight:700; cursor:pointer; transition:.15s; background:var(--primary); color:#fff} .btn:hover{filter:brightness(1.06); text-decoration:none} .btn:disabled{opacity:.5; cursor:default} .btn.ghost{background:#fff; color:var(--primary); border-color:var(--line)} .btn.ghost:hover{border-color:var(--primary)} .btn.lg{padding:15px 26px; font-size:16.5px; border-radius:13px} .btn .g{display:inline-grid; place-items:center; width:20px; height:20px; background:#fff; border-radius:4px; color:#4285F4; font-weight:900; font-size:13px} /* ── hero / landing ──────────────────────────────────── */ .hero{padding:8px 0 6px} .kicker{display:inline-block; color:var(--primary); font-weight:800; letter-spacing:.08em; font-size:12.5px; text-transform:uppercase; background:var(--soft); border:1px solid var(--line); border-radius:999px; padding:5px 13px} .hero h1{font-size:33px; line-height:1.34; margin:16px 0 14px; font-weight:850; letter-spacing:-.01em} .hero .lede{font-size:17px; color:var(--muted); margin:0 0 26px; max-width:46em} .hero .accent-bar{height:5px; width:70px; border-radius:3px; background:linear-gradient(90deg,var(--primary),var(--accent)); margin:0 0 26px} .cards{display:grid; grid-template-columns:1fr; gap:14px; margin:26px 0} @media(min-width:680px){.cards{grid-template-columns:repeat(3,1fr)}} .feature{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow)} .feature .ic{font-size:26px} .feature h3{margin:10px 0 6px; font-size:16.5px} .feature p{margin:0; color:var(--muted); font-size:14.5px} .panel{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px 28px; box-shadow:var(--shadow); margin:24px 0} .panel h2{margin:0 0 16px; font-size:21px; color:var(--primary-dark)} .steps{counter-reset:s; list-style:none; margin:0; padding:0} .steps li{counter-increment:s; position:relative; padding:8px 0 8px 44px; color:var(--ink)} .steps li::before{content:counter(s); position:absolute; left:0; top:6px; width:30px; height:30px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; font-weight:800; font-size:14px} .note{font-size:13.5px; color:var(--muted); background:var(--soft); border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin:18px 0} .cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:8px} .foot{margin-top:42px; padding-top:18px; border-top:1px solid var(--line); color:var(--muted); font-size:12.5px; text-align:center} /* ── catalog (platform index) ────────────────────────── */ .company-block{margin:30px 0} .company-block .co-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; border-bottom:2px solid var(--line); padding-bottom:10px; margin-bottom:16px} .company-block h2{margin:0; font-size:22px} .topic-card{display:block; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:18px 20px; box-shadow:var(--shadow); transition:.15s} .topic-card:hover{transform:translateY(-3px); border-color:var(--primary); text-decoration:none; box-shadow:0 12px 28px rgba(11,110,153,.16)} .topic-card .t{font-weight:800; font-size:17px; color:var(--ink)} .topic-card .d{color:var(--muted); font-size:14px; margin-top:8px} .topic-card .meta{margin-top:12px; font-size:12.5px; color:var(--primary-dark)} /* ── interview chat ──────────────────────────────────── */ .chat-shell{max-width:760px; margin:0 auto; padding:0 16px} .chat-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:14px 4px; flex-wrap:wrap} .chat-head .title{font-weight:800} .chat-head .timer{font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums} .thread{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; min-height:48vh; max-height:64vh; overflow-y:auto; box-shadow:var(--shadow)} .msg{display:flex; margin:10px 0; gap:10px} .msg .bubble{padding:11px 15px; border-radius:14px; max-width:84%; white-space:pre-wrap; word-break:break-word; font-size:15.5px; line-height:1.75} .msg.assistant .bubble{background:var(--soft); border:1px solid var(--line); border-top-left-radius:4px} .msg.user{justify-content:flex-end} .msg.user .bubble{background:var(--primary); color:#fff; border-top-right-radius:4px} .typing .bubble{color:var(--muted)} .composer{display:flex; gap:10px; margin:14px 0 4px; align-items:flex-end} .composer textarea{flex:1; resize:none; border:1px solid var(--line); border-radius:12px; padding:12px 14px; font:inherit; line-height:1.6; max-height:140px; background:#fff} .composer textarea:focus{outline:none; border-color:var(--primary)} .endbar{display:flex; justify-content:center; margin:14px 0 4px} .endbar button{background:var(--soft); border:1.5px solid var(--primary); color:var(--primary); font:inherit; font-size:14.5px; font-weight:700; cursor:pointer; padding:11px 22px; border-radius:999px; transition:background .15s, color .15s} .endbar button:hover{background:var(--primary); color:#fff} .gate{max-width:520px; margin:8vh auto; text-align:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow)} .gate h1{font-size:22px; margin:6px 0 10px} .gate p{color:var(--muted); margin:0 0 22px} .report-box{background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:18px 20px; margin-top:16px} /* ── markdown / report ───────────────────────────────── */ .md h1,.md h2,.md h3{color:var(--primary-dark); line-height:1.4} .md h2{font-size:20px; margin:24px 0 10px; padding-left:11px; border-left:5px solid var(--primary)} .md h3{font-size:17px; margin:18px 0 8px} .md table{border-collapse:collapse; width:100%; font-size:14px; margin:14px 0} .md th,.md td{border:1px solid var(--line); padding:8px 11px; text-align:left} .md thead th{background:var(--primary); color:#fff} .md code{background:#eef2f7; padding:1px 6px; border-radius:5px; font-size:.92em} .md ul,.md ol{padding-left:1.4em} .stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:12px; margin:14px 0} .stat{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px} .stat .n{font-size:24px; font-weight:850; color:var(--primary)} .stat .l{font-size:12.5px; color:var(--muted)} .spinner{display:inline-block; width:18px; height:18px; border:2px solid var(--line); border-top-color:var(--primary); border-radius:50%; animation:spin .8s linear infinite; vertical-align:middle} @keyframes spin{to{transform:rotate(360deg)}} .hidden{display:none !important} /* ========================================================================== landing page (public/index.html only) Everything below is prefixed .lp-* and scoped under body.lp-page, so the interview, report and per-campaign landings are untouched by it. The root page is the one page built to be read cold by a stranger, and it needs things the app pages never do: a full-bleed masthead, sample-output blocks, comparison tables. ========================================================================== */ .lp-page{--maxw:1000px} .lp-page .wrap{padding-top:44px} /* ── masthead band ───────────────────────────────────── */ /* Full-bleed: it sits outside .wrap so the dark ground runs edge to edge, while the topbar and hero inside keep the page's own measure. */ .lp-band{ background: radial-gradient(110% 140% at 88% 0%, rgba(201,163,91,.26) 0%, rgba(201,163,91,0) 55%), radial-gradient(95% 130% at 2% 100%, rgba(11,110,153,.55) 0%, rgba(11,110,153,0) 62%), linear-gradient(158deg,#0a2434,#0d3d54 58%,#0b6379); color:#fff; } .lp-band .brand{color:#fff} .lp-band .brand .logo{background:#fff; color:var(--primary-dark)} .lp-band .brand .sub{color:rgba(255,255,255,.7)} .lp-band .btn{background:#fff; color:var(--primary-dark)} .lp-band .btn.ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.45)} .lp-band .btn.ghost:hover{background:rgba(255,255,255,.1); border-color:#fff} .lp-hero{max-width:var(--maxw); margin:0 auto; padding:14px 20px 54px} .lp-kicker{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.14em; color:rgba(255,255,255,.82); border:1px solid rgba(255,255,255,.3); border-radius:999px; padding:5px 14px; margin-bottom:22px; } .lp-hero h1{ font-size:clamp(27px,4.6vw,40px); line-height:1.3; font-weight:850; letter-spacing:-.015em; margin:0 0 16px; text-wrap:balance; } /* text-wrap:pretty — without it the last line orphans a single character, which in Chinese reads as a typo rather than a line break. */ .lp-hero .lp-lede{ margin:0 0 28px; max-width:56ch; font-size:16.5px; line-height:1.85; color:rgba(255,255,255,.88); text-wrap:pretty; } .lp-stats{ display:flex; flex-wrap:wrap; gap:14px 34px; margin-top:30px; padding-top:18px; border-top:1px solid rgba(255,255,255,.22); } .lp-stat .n{display:block; font-size:19px; font-weight:850; letter-spacing:-.01em} .lp-stat .l{font-size:12.5px; color:rgba(255,255,255,.7)} /* ── full-bleed strips (index.html) ──────────────────── */ /* The landing page was built out of numbered sections on one flat background, which is the shape of a whitepaper: eight identically-structured blocks, all at the same volume, asking to be read start to finish. A landing page needs the opposite — alternating full-bleed grounds so the eye can tell where it is, and one section that is visibly the main event. The numbered .lp-sec rules below are kept as-is: sample-report.html IS a document and still uses them. */ .lp-page{background:#fff} /* Spacing scale. The page had exactly two tiers — 0–42px inside a block and a flat ~155px at every strip boundary — with nothing between. Measured: 87 sibling gaps, median 15px, p90 38px, MAX 42px. That missing middle tier is what "呼吸感不對" was: 35% of the page height is already empty, but broken into 71 fragments averaging 50px, so no single gap ever reads as a pause. */ :root{ --sp-tight:16px; /* label → the thing it labels */ --sp-item:40px; /* peers in a list */ --sp-group:96px; /* group → group. This is the tier that did not exist. */ --sp-sect:128px; /* section → section */ } /* Padding varies with density instead of being constant. Strip heights range 426px → 2,860px (6.7x) and every one of them had the same 62px, so the short strips read as padded-out and the tall ones as crammed. An earlier pass tried raising the constant to 78px; it added 2,200px of page and changed nothing, because the problem was the uniformity, not the value. */ .lp-strip{padding:88px 0} .lp-strip--tight{padding:64px 0} .lp-strip--open{padding:120px 0 108px} .lp-strip>.lp-in{max-width:var(--maxw); margin:0 auto; padding:0 20px} .lp-strip--white{background:#fff} .lp-strip--soft{background:var(--soft); border-block:1px solid var(--line)} .lp-strip--dark{ background: radial-gradient(70% 90% at 88% 4%, rgba(201,163,91,.16) 0%, rgba(201,163,91,0) 60%), linear-gradient(168deg,#0a2434,#0d3d54 62%,#0b5a76); color:#fff; } @media(max-width:700px){ .lp-strip{padding:56px 0} .lp-strip--tight{padding:40px 0} .lp-strip--open{padding:80px 0} } /* One eyebrow instead of an index numeral. It orients without implying there is a section 7 you are expected to reach. */ .lp-eyebrow{display:inline-block; margin-bottom:15px; font-size:12.5px; font-weight:800; letter-spacing:.16em; color:var(--primary)} /* The heading carries the argument now, so it is sized to be read on its own from across the page rather than scanned as a table of contents. */ /* Widths below are in em, not ch. `ch` is the advance width of "0" — in this stack one Han character measures 1.86ch, so `max-width:66ch` silently meant 38 characters, not 66. A Han character is exactly 1em, so the numbers now say what they mean. Rendered widths are unchanged by the conversion. */ .lp-claim{ margin:0 0 16px; font-size:clamp(25px,3.4vw,37px); line-height:1.34; font-weight:850; letter-spacing:-.022em; max-width:14em; color:var(--ink); text-wrap:balance; } .lp-head{margin-bottom:36px} .lp-head--center{text-align:center} .lp-head--center .lp-claim{max-width:15.5em; margin-left:auto; margin-right:auto} .lp-head--center .lp-sub{margin-left:auto; margin-right:auto} /* Section 2 opens as two columns where the others open as one — the point is that consecutive sections should not share a silhouette. */ .lp-head--split{display:grid; gap:14px 44px} @media(min-width:820px){.lp-head--split{grid-template-columns:1.3fr 1fr; align-items:end}} /* 18.5px, not 15.5px. 235 of the page's 253 text lines sat between 13 and 17.5px and then jumped straight to the 37px heading — a 2.18x cliff with nothing in it, which is why every screen read at the same volume. The section lede is the natural occupant of that missing tier. */ .lp-strip .lp-sub{margin:0; max-width:29em; font-size:18.5px; line-height:1.75} .lp-strip .lp-h3{margin:var(--sp-item) 0 14px; max-width:30em} .lp-strip>.lp-in>p{max-width:38em} /* The heading block scales with what follows it: a 200px head introducing 164px of content is the heading outweighing its own section. */ .lp-strip--tight .lp-head{margin-bottom:24px} .lp-strip--tight .lp-eyebrow{margin-bottom:10px} .lp-strip--tight .lp-claim{font-size:clamp(22px,2.6vw,28px)} .lp-strip--open .lp-head{margin-bottom:56px} /* The one whitespace event on the page. Everything else here is a box; this is a single sentence alone on a ground with room around it. Before this, the largest continuous gap anywhere was 180px and per-screen ink coverage never varied more than 1.75x from the top of the page to the bottom. */ .lp-strip--quote{padding:128px 0; background:var(--soft); border-block:1px solid var(--line)} .lp-strip--quote .lp-in>.lp-pull{ margin:0 auto; padding:0; border-left:0; text-align:center; max-width:24em; font-size:clamp(21px,2.5vw,28px); line-height:1.72; font-weight:750; } @media(max-width:700px){ .lp-strip--quote{padding:80px 0} /* Centred text needs lines of roughly equal length to look composed. At 390px these two sentences wrap to 4 ragged lines and the authored
lands mid-thought, so on a phone it goes back to a left-aligned block. */ .lp-strip--quote .lp-pull{text-align:left; font-size:20px; max-width:none} .lp-strip--quote .lp-pull br{display:none} } /* Dark ground: everything that sits on it has to invert. The sample-output blocks deliberately do NOT — white panels floating on dark is what makes section 3 read as the main event. */ .lp-strip--dark .lp-eyebrow{color:var(--accent)} .lp-strip--dark .lp-claim{color:#fff} .lp-strip--dark .lp-sub{color:rgba(255,255,255,.74)} .lp-strip--dark .lp-h3{color:#fff} .lp-strip--dark>.lp-in>p{color:rgba(255,255,255,.84)} .lp-strip--dark>.lp-in>p strong,.lp-strip--dark>.lp-in>p b{color:#fff} .lp-strip--dark .lp-card{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.17); box-shadow:none} .lp-strip--dark .lp-card h3{color:#fff} .lp-strip--dark .lp-card p,.lp-strip--dark .lp-card .lp-list{color:rgba(255,255,255,.78)} .lp-strip--dark .lp-card p b,.lp-strip--dark .lp-card p strong, .lp-strip--dark .lp-list b,.lp-strip--dark .lp-list strong{color:#fff} .lp-strip--dark .lp-note{background:rgba(255,255,255,.07); border-left-color:var(--accent); color:rgba(255,255,255,.84)} .lp-strip--dark .lp-note b{color:var(--accent)} /* Light panels on the dark ground have to opt back out of the inherited white, or their body text goes white-on-white and simply vanishes — the headers and pills survive because those set a colour explicitly, which makes the failure look like a half-rendered table rather than an obvious mistake. */ /* Section 3 is 27.8% of the page and ran 1,980px — 2.2 screens — without a single gap over 60px, because four identical [h3 + sample panel] units repeated on a ~405px cycle. Widening every gap would just make it taller; the fix is an uneven one, so the run splits into two halves you can tell apart. */ #output .lp-h3{font-size:22px; line-height:1.45; margin:44px 0 18px} #output .lp-h3:nth-of-type(n+3){margin-top:var(--sp-group)} /* The first sample panel breaks the measure — the only element on the page wider than the container, so at least one thing has physical presence. */ @media(min-width:1100px){ #output .lp-mock:first-of-type{margin-left:-40px; margin-right:-40px} } .lp-strip--dark .lp-mock{color:var(--ink)} /* Emphasis inverts on the dark ground. On white, .go is the tinted card and the plain one recedes; on dark that reads backwards — the blue card sinks into the background and the card we are NOT trying to convert is the one that glows. So here the conversion card is the white panel and the other one recedes. */ .lp-strip--dark .lp-cta>div{background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.17); box-shadow:none; color:rgba(255,255,255,.78)} .lp-strip--dark .lp-cta>div h3{color:#fff} .lp-strip--dark .lp-cta>div p{color:rgba(255,255,255,.75)} .lp-strip--dark .lp-cta .go{background:#fff; border-color:transparent; color:var(--ink); box-shadow:0 14px 44px rgba(0,0,0,.3)} .lp-strip--dark .lp-cta .go h3{color:var(--ink)} .lp-strip--dark .lp-cta .go p,.lp-strip--dark .lp-cta .go .lp-list{color:var(--muted)} .lp-strip--dark .lp-cta .go a{color:var(--primary)} .lp-strip--dark .lp-cta .go .btn{color:#fff; text-decoration:none; margin-top:4px} .lp-strip--dark .lp-midcta{background:#fff} .lp-strip--dark .lp-midcta h3{color:var(--ink)} .lp-strip--dark .lp-midcta p{color:var(--muted)} .lp-strip--dark .lp-midcta .btn{background:var(--primary); color:#fff} .lp-strip--dark .foot{border-top-color:rgba(255,255,255,.18); color:rgba(255,255,255,.6)} .lp-strip--dark .foot a{color:rgba(255,255,255,.82)} /* ── numbered sections ───────────────────────────────── */ /* The numerals earn their place: this is a page people cite back at us in email ("第 3 節那張表"). */ .lp-sec{margin:0 0 52px; scroll-margin-top:20px} .lp-sec>h2{ display:flex; align-items:baseline; gap:11px; margin:0 0 8px; font-size:23px; font-weight:850; line-height:1.4; letter-spacing:-.01em; color:var(--ink); text-wrap:balance; } .lp-sec>h2 .n{ flex:0 0 auto; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:14px; font-weight:700; color:var(--primary); border-bottom:2px solid var(--primary); line-height:1.1; } .lp-sub{margin:0 0 22px 32px; color:var(--muted); font-size:14.5px; max-width:60ch} .lp-h3{margin:34px 0 12px; font-size:17px; font-weight:800; color:var(--primary-dark)} .lp-sec>p{max-width:66ch} .lp-lead{background:var(--soft); border:1px solid var(--line); border-radius:14px; padding:20px 22px; margin:0 0 20px} .lp-lead::before{content:""; display:block; width:44px; height:4px; border-radius:2px; background:linear-gradient(90deg,var(--primary),var(--accent)); margin-bottom:13px} .lp-lead p{margin:0; max-width:66ch} .lp-pull{ margin:26px 0 0; padding:2px 0 2px 18px; border-left:4px solid var(--accent); font-size:17px; font-weight:700; line-height:1.75; color:var(--ink); max-width:40ch; } /* ── card grids ──────────────────────────────────────── */ /* 14px of gutter on a 310px card is 4.5% — three cards read as one slab. */ .lp-grid{display:grid; gap:18px; grid-template-columns:1fr} @media(min-width:760px){ /* align-items:start, or a short card stretches to match its tall neighbour and ends with a 148px void under the last line, which reads as a bug rather than as breathing room. */ .lp-grid.g2{grid-template-columns:1fr 1fr; gap:24px; align-items:start} .lp-grid.g3{grid-template-columns:repeat(3,1fr)} .lp-cta{gap:24px} } .lp-card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px 24px; box-shadow:var(--shadow)} .lp-card h3{margin:0 0 9px; font-size:16px; font-weight:800; line-height:1.5} .lp-card p{margin:0; font-size:15px; line-height:1.8; color:var(--muted)} .lp-card p+p{margin-top:9px} .lp-card p b,.lp-card p strong{color:var(--ink); font-weight:700} .lp-list{margin:0; padding-left:20px; font-size:15px; line-height:1.8; max-width:36em; color:var(--muted)} .lp-list li{margin:0 0 8px} .lp-list li:last-child{margin-bottom:0} .lp-list b,.lp-list strong{color:var(--ink)} .lp-card .steps li{font-size:14.5px; color:var(--muted); padding-left:40px} .lp-card .steps li b{color:var(--ink)} .lp-card .steps li::before{width:26px; height:26px; font-size:13px; top:9px} /* ── tables ──────────────────────────────────────────── */ /* Wide content scrolls inside its own box; the page body must never scroll sideways on a phone. */ /* A table that scrolls with no sign that it scrolls is a table with columns missing. Measured at 390px: the comparison table hides 194px — and what is hidden is the "AI 訪談" column, i.e. the entire argument. The hot-spot table hides 324px, including the "多久發現" column that its own caption calls the one that matters. The mask is the affordance; it fades out once you reach the right-hand edge. */ .lp-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch} /* Declared before the media query on purpose: same specificity, so whichever comes last wins, and putting the `none` afterwards hides the hint at every width. */ .lp-swipe{display:none} @media(max-width:820px){ .lp-scroll{ -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent 100%); mask-image:linear-gradient(90deg,#000 88%,transparent 100%); } .lp-scroll[data-scrolled-end]{-webkit-mask-image:none; mask-image:none} .lp-swipe{display:block; margin:0 0 8px; font-size:12.5px; color:var(--muted); letter-spacing:.02em} .lp-strip--dark .lp-swipe{color:rgba(255,255,255,.6)} .lp-mock .lp-swipe{color:var(--muted)} } .lp-tbl{width:100%; border-collapse:collapse; font-size:14px} .lp-tbl th,.lp-tbl td{padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top} .lp-tbl th{background:var(--soft); color:var(--primary-dark); font-weight:800; font-size:13px; white-space:nowrap} .lp-tbl td:first-child{font-weight:700; white-space:nowrap} .lp-tbl tr:last-child td{border-bottom:0} .lp-tbl .num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums} /* A two-column definition table is prose wearing a table's clothes, and left to fill the container its second column ran 60 characters a line — half again over WCAG 1.4.8's 40-character ceiling for CJK, and the only place on the page still over it. Fixed layout so the label column cannot steal width back. */ .lp-tbl.def{table-layout:fixed; max-width:740px; font-size:15px} .lp-tbl.def td:first-child{width:170px} .lp-tbl.def th,.lp-tbl.def td{padding:12px 14px} /* The one column the reader is being sold: tinted, not shouted at. */ .lp-tbl.vs th.hl{background:var(--primary); color:#fff} .lp-tbl.vs td.hl{background:rgba(11,110,153,.05); color:var(--ink)} .lp-tbl.vs td{white-space:normal; min-width:150px} /* The row label must keep td:first-child's nowrap, which the rule above would otherwise cancel out at equal specificity — "受訪者成本" breaking after the fourth character reads as a rendering fault. */ .lp-tbl.vs td:first-child{white-space:nowrap; min-width:auto; color:var(--muted)} .lp-pill{display:inline-block; padding:1px 9px; border-radius:999px; font-size:12px; font-weight:700; border:1px solid currentColor; white-space:nowrap} .lp-pill.hi{color:#b3363d; background:#fdeef0} .lp-pill.mid{color:#94670f; background:#fdf5e6} .lp-pill.lo{color:#1c7a57; background:#eaf7f1} /* ── sample-output blocks ────────────────────────────── */ /* Every mock is fenced and labelled. Showing invented numbers as if they were a real client's results is the one thing that would make this whole page worth less than the plain one it replaced. */ .lp-mock{ position:relative; margin:16px 0 0; padding:22px 18px 16px; border:1.5px dashed #a98bd0; border-radius:14px; background:#fbf9ff; } .lp-mock::before{ content:"格式示意 · 數字為虛構"; position:absolute; top:-10px; left:16px; background:#fbf9ff; padding:0 8px; font-size:11.5px; font-weight:700; letter-spacing:.04em; color:#6d4fa1; } .lp-mock .lp-tbl th{background:#f3eefa; color:#4f3a7a} .lp-cap{margin:14px 0 0; font-size:15px; line-height:1.8; max-width:34em; color:var(--muted)} .lp-cap strong{color:var(--ink)} .lp-bars{display:grid; gap:11px} .lp-bar{display:grid; grid-template-columns:minmax(84px,140px) 1fr 48px; gap:12px; align-items:center; font-size:13.5px} .lp-bar .track{height:11px; border-radius:999px; background:#e7e2f2; overflow:hidden} .lp-bar .fill{display:block; height:100%; border-radius:999px; background:var(--primary)} .lp-bar .fill.low{background:#c0444b} .lp-bar .fill.mid{background:#cf8f30} .lp-bar .v{text-align:right; font-variant-numeric:tabular-nums; color:var(--muted); font-size:13px} /* Line length was all over the page: 7 characters in a table cell, 18 in a card, 61 in a quote, 68 in a caption. Comfortable Chinese sits at 28–40, and the eye recalibrating at every block is a large part of what reads as "airless". These caps pull the long end back in. */ .lp-q{background:#fff; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:0 10px 10px 0; padding:13px 17px; margin:0 0 10px; font-size:15px; line-height:1.8; max-width:38em} .lp-q .src{display:block; margin-top:6px; font-size:12.5px; color:var(--muted)} .lp-q.bad{border-left-color:var(--danger)} .lp-q.bad .src{color:var(--danger)} /* `max-width:none` used to sit here and did nothing: .lp-strip>.lp-in>p is (0,2,1) and beat .lp-note at (0,1,0), so the note was silently capped at the paragraph measure. Stating the intended width explicitly instead of writing a rule that loses. */ .lp-note{background:#fdf8ef; border-left:4px solid var(--accent); border-radius:0 12px 12px 0; padding:16px 20px; margin:20px 0 0; font-size:15px; line-height:1.8} .lp-strip>.lp-in>p.lp-note{max-width:36em} .lp-note b{color:#8a6516} /* ── diagrams ────────────────────────────────────────── */ .lp-fig{margin:0} .lp-fig svg{display:block; width:100%; height:auto; background:var(--card); border:1px solid var(--line); border-radius:12px} .lp-fig figcaption{margin-top:11px; font-size:13.5px; color:var(--muted)} .lp-fig figcaption strong{color:var(--ink)} /* ── mid-page call to action ─────────────────────────── */ /* The page runs past 7,000px on a desktop. Section 3 is where a reader is most convinced, and until this existed the only way out was to keep scrolling. */ .lp-midcta{ display:grid; gap:16px; align-items:center; margin-top:var(--sp-item); padding:26px 30px; border-radius:14px; background:linear-gradient(158deg,#0c3a50,#0b6e99); color:#fff; } @media(min-width:760px){.lp-midcta{grid-template-columns:1fr auto; gap:26px}} .lp-midcta h3{margin:0 0 6px; font-size:17px; font-weight:850; color:#fff} .lp-midcta p{margin:0; font-size:14.5px; line-height:1.75; color:rgba(255,255,255,.86); max-width:34em} .lp-midcta .btn{background:#fff; color:var(--primary-dark); white-space:nowrap} /* ── who we are ──────────────────────────────────────── */ /* Deliberately the quietest block on the page: it is the one section a reader goes looking for rather than one that has to catch them, and a hard sell here reads as compensating for something. */ .lp-about{display:grid; gap:22px; grid-template-columns:1fr; background:var(--soft); border:1px solid var(--line); border-radius:16px; padding:26px 28px} @media(min-width:760px){.lp-about{grid-template-columns:1.65fr 1fr; gap:34px}} .lp-about h3{margin:0 0 12px; font-size:16.5px; font-weight:850} .lp-about p{margin:0 0 12px; font-size:14.5px; color:var(--muted); max-width:62ch} .lp-about p:last-child{margin-bottom:0} .lp-about b{color:var(--ink); font-weight:700} .lp-contact{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:18px 20px; align-self:start} .lp-contact dl{margin:0} .lp-contact dt{margin-top:12px; font-size:12.5px; color:var(--muted); letter-spacing:.04em} .lp-contact dt:first-child{margin-top:0} .lp-contact dd{margin:2px 0 0; font-size:14.5px; font-weight:600; line-height:1.6} /* ── closing call to action ──────────────────────────── */ .lp-cta{display:grid; gap:14px; grid-template-columns:1fr} @media(min-width:760px){.lp-cta{grid-template-columns:1fr 1fr; align-items:start}} /* On one column the source order puts the respondent card — a dead end for a buyer, "use the link your organiser sent you" — above the only card with a button in it. Side by side that reads as two options; stacked it reads as "there is nothing here for me". */ @media(max-width:759px){.lp-cta .go{order:-1}} .lp-cta>div{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:26px 28px; box-shadow:var(--shadow)} .lp-cta h3{margin:0 0 12px; font-size:17.5px; font-weight:850} .lp-cta p{margin:0 0 12px; font-size:14.5px; color:var(--muted)} .lp-cta p:last-child{margin-bottom:0} .lp-cta .go{background:linear-gradient(158deg,#0c3a50,#0b6e99); border-color:transparent; color:#fff} .lp-cta .go h3{color:#fff} .lp-cta .go p,.lp-cta .go .lp-list{color:rgba(255,255,255,.86)} .lp-cta .go .lp-list{margin-bottom:12px} .lp-cta .go a{color:#fff; text-decoration:underline} .lp-last{margin-bottom:0}