/* NexCircle 視覺主題層(2026-09-26)
------------------------------------------------------------------
背景:用戶回饋舊版「slate 灰 + cyan pill + emoji 卡片」太像 AI 生成的
樣板,Hank 指定參考 sharedan.co.jp 的日系企業站語彙全站改版。借的是
設計語法,不搬對方的品牌資產(盾牌 logo、綠色、標語都不用):
- 淡青灰方格紙底色 + 白色格線,取代純白/slate-50 交替的區塊底
- Inter(英文展示字)+ Noto Sans TC/JP/KR,內文加字距、放寬行高
- 區塊標題 = 大型英文展示字(首字母主色)+ 小的在地語標籤 + 標題
- 扁平白卡片放在方格底上,不用陰影堆疊層次
- 滿版主色大圓角面板當節奏轉折,深墨色區塊收尾
- 按鈕一律 pill,附箭頭;導覽列英文大寫加字距
主色沿用 CI 提案 #0C8EAA,單一色相,不加靛紫(大面積靛紫容易滑向
AI 紫,見 nexcircle-design 去 AI 感準則)。
載入順序:放在各頁既有樣式之後,用同等或更高的選擇器權重覆蓋。
首頁(#nexcircle-root)跟靜態產生頁(.nc-programs)共用這一份。 */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+TC:wght@400;500;700&family=Noto+Sans+JP:wght@400;500;700&family=Noto+Sans+KR:wght@400;500;700&display=swap');
:root,
#nexcircle-root,
.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights,
.nc-spaces, .nc-stories, .nc-calculator {
--nc-bg: #E6EEF0;
--nc-grid: rgba(255, 255, 255, .78);
--nc-surface: #FFFFFF;
--nc-primary: #0C8EAA;
--nc-primary-deep: #0A7189;
/* 主色當文字用的版本:#0C8EAA 在白底只有 3.8:1,小字一律用這個(5.6:1) */
--nc-primary-text: #0A7189;
--nc-mint: #8FD0DE;
--nc-mint-soft: #D8ECF1;
--nc-ink: #1F2629;
--nc-text: #2E3437;
--nc-muted: #59656A; /* 2026-09-27 加深:原 #687277 在底色上 4.2:1,未達 4.5 */
--nc-line: #D3DEE1;
--nc-dark: #242B2E;
--nc-radius-card: 16px;
--nc-radius-panel: 32px;
--nc-font-en: 'Inter', 'Noto Sans TC', 'Noto Sans JP', 'Noto Sans KR', system-ui, sans-serif;
--nc-font: 'Noto Sans TC', 'Inter', 'Noto Sans JP', 'Noto Sans KR', system-ui, -apple-system, sans-serif;
/* 舊 token 重新指到新色票,讓既有元件不用逐一改寫就換成同一套色調 */
--slate-50: #F3F7F8;
--slate-100: #E6EEF0;
--slate-200: #D3DEE1;
--slate-300: #B9C7CB;
--slate-400: #59656A; /* 原 #8E9CA1 在白卡上 2.8:1,標籤看不清楚 */
--slate-500: #687277;
--slate-600: #4D575B;
--slate-700: #394144;
--slate-800: #2A3134;
--slate-900: #1F2629;
--cyan-50: #E1F1F4;
--cyan-100: #CDE8EE;
--cyan-600: #0C8EAA;
--cyan-700: #0A7189;
}
/* ================================================================
首頁 #nexcircle-root
================================================================ */
#nexcircle-root {
font-family: var(--nc-font);
color: var(--nc-text);
letter-spacing: .04em;
line-height: 1.8;
background-color: var(--nc-bg);
background-image:
linear-gradient(var(--nc-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--nc-grid) 1px, transparent 1px);
background-size: 88px 88px;
background-position: center top;
}
#nexcircle-root:lang(ja) { font-family: 'Noto Sans JP', 'Inter', 'Noto Sans TC', 'Noto Sans KR', system-ui, sans-serif; }
#nexcircle-root:lang(ko) { font-family: 'Noto Sans KR', 'Inter', 'Noto Sans TC', 'Noto Sans JP', system-ui, sans-serif; }
#nexcircle-root:lang(en) { font-family: var(--nc-font-en); letter-spacing: .01em; }
/* 區塊底色:不再白/灰交替,全站同一張方格紙,區塊靠留白分段 */
#nexcircle-root .section-white,
#nexcircle-root .section-soft,
#nexcircle-root .hero { background: transparent; }
#nexcircle-root .section { padding: 6.5rem 0; }
/* ---------- header ---------- */
#nexcircle-root .header {
background: rgba(230, 238, 240, .82);
border-bottom: 0;
}
#nexcircle-root .brand span {
font-family: var(--nc-font-en);
font-weight: 700;
letter-spacing: .01em;
color: var(--nc-primary);
}
#nexcircle-root .nav-links .nav-anchor {
font-family: var(--nc-font-en);
font-size: .9rem;
font-weight: 500;
letter-spacing: .06em;
color: var(--nc-ink);
border-radius: 9999px;
}
#nexcircle-root .nav-links .nav-anchor:hover { background: rgba(255,255,255,.7); color: var(--nc-ink); }
#nexcircle-root .nav-links .nav-anchor.active { background: var(--nc-surface); color: var(--nc-primary-text); }
#nexcircle-root .nav-links .nav-cta,
#nexcircle-root .nav-links .nav-cta.active {
background: var(--nc-primary-deep); /* 白字在 #0C8EAA 上只有 3.8:1 */
color: #fff;
box-shadow: none;
padding: .55rem 1.35rem;
letter-spacing: .08em;
}
#nexcircle-root .nav-links .nav-cta:hover { background: #085F73; transform: none; }
#nexcircle-root .mobile-menu-trigger {
background: var(--nc-ink);
border-color: var(--nc-ink);
color: #fff;
}
#nexcircle-root .mobile-menu-trigger:hover { background: var(--nc-primary); border-color: var(--nc-primary); color: #fff; }
#nexcircle-root .lang-trigger { background: transparent; border-color: var(--nc-line); }
#nexcircle-root .explore-options,
#nexcircle-root .lang-options,
#nexcircle-root .mobile-menu-panel {
border: 0;
border-radius: var(--nc-radius-card);
box-shadow: 0 18px 40px -18px rgba(31, 38, 41, .28);
}
#nexcircle-root .mobile-menu-panel { border-radius: 0 0 var(--nc-radius-card) var(--nc-radius-card); }
/* ---------- 字級 ---------- */
#nexcircle-root h1 {
font-size: clamp(2.3rem, 6vw, 4rem);
font-weight: 700;
letter-spacing: .04em;
line-height: 1.3;
color: var(--nc-ink);
}
#nexcircle-root h2 {
font-size: clamp(1.55rem, 3.4vw, 2.3rem);
font-weight: 700;
letter-spacing: .06em;
line-height: 1.5;
color: var(--nc-ink);
}
#nexcircle-root h3 {
font-weight: 700;
letter-spacing: .04em;
line-height: 1.5;
color: var(--nc-ink);
}
#nexcircle-root .lead { color: var(--nc-text); letter-spacing: .05em; line-height: 1.9; }
#nexcircle-root .body-copy { color: var(--nc-text); letter-spacing: .05em; line-height: 2; }
#nexcircle-root .small-copy,
#nexcircle-root .fine-print { color: var(--nc-muted); }
/* 小標籤:拿掉 pill 色塊,改成純文字小標,放在大標題上方當語境提示 */
#nexcircle-root .tag {
background: none;
padding: 0;
border-radius: 0;
color: var(--nc-ink);
font-size: .88rem;
font-weight: 500;
letter-spacing: .12em;
}
/* ---------- 區塊標題:大型英文展示字 + 在地語標籤 + 標題 ----------
英文字放在 data-en 屬性,四語共用,用 ::before 產生,不進 DOM 文字流,
螢幕報讀器不會重複念(content 用 attr() 生成的文字大多數報讀器會念,
所以額外包 aria-hidden 不可行,改用 speak 規則相容做法:放在 ::before
並設 alt 文字為空)。 */
#nexcircle-root .section-head {
display: block;
margin-bottom: 3rem;
}
#nexcircle-root .section-head[data-en]::before,
#nexcircle-root .display-en[data-en]::before {
content: attr(data-en);
content: attr(data-en) / "";
display: block;
font-family: var(--nc-font-en);
font-size: clamp(3.2rem, 9vw, 6.2rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.035em;
color: var(--nc-ink);
margin-bottom: .9rem;
}
#nexcircle-root .section-head .tag,
#nexcircle-root .display-en .tag { display: block; margin-bottom: 1.6rem; }
#nexcircle-root .section-head h2 { margin-bottom: .9rem; }
/* ---------- 按鈕 ---------- */
#nexcircle-root .btn {
border-radius: 9999px;
padding: .95rem 1.9rem;
font-weight: 700;
letter-spacing: .08em;
}
#nexcircle-root .btn-primary { background: var(--nc-primary); box-shadow: none; }
#nexcircle-root .btn-primary:hover { background: var(--nc-primary-deep); transform: none; }
#nexcircle-root .btn-outline,
#nexcircle-root .btn-ghost {
background: var(--nc-surface);
color: var(--nc-ink);
border: 0;
box-shadow: none;
}
#nexcircle-root .btn-outline::after,
#nexcircle-root .btn-ghost::after,
#nexcircle-root .door-cta::after {
content: '';
width: 1.6em;
height: .6em;
margin-left: .5rem;
background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24M19 1l5 4-5 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24M19 1l5 4-5 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .25s ease;
}
#nexcircle-root .btn-outline:hover,
#nexcircle-root .btn-ghost:hover { color: var(--nc-primary-text); background: var(--nc-surface); }
#nexcircle-root .btn-outline:hover::after,
#nexcircle-root .btn-ghost:hover::after,
#nexcircle-root .explore-card:hover .door-cta::after { transform: translateX(4px); }
#nexcircle-root .btn-outline::after { display: inline-block; }
/* ---------- 卡片:扁平白卡,放在方格底上 ---------- */
#nexcircle-root .card,
#nexcircle-root .aud-card,
#nexcircle-root .explore-card,
#nexcircle-root .testimonial-card,
#nexcircle-root .program-card,
#nexcircle-root .city-card,
#nexcircle-root .insight-card,
#nexcircle-root .team-card,
#nexcircle-root .about-stat,
#nexcircle-root .hero-card,
#nexcircle-root .survey-shell,
#nexcircle-root .quiz-shell,
#nexcircle-root .advisor-shell,
#nexcircle-root .warn-card,
#nexcircle-root .visa-step-card {
background: var(--nc-surface);
border: 0;
border-radius: var(--nc-radius-card);
box-shadow: none;
}
#nexcircle-root .card:hover,
#nexcircle-root .explore-card:hover,
#nexcircle-root .program-card:hover,
#nexcircle-root .city-card:hover { box-shadow: none; transform: none; }
#nexcircle-root .explore-card:hover h3 { color: var(--nc-primary-text); }
/* 入口卡片:原本頂部是主色漸層色塊 + emoji,改成淡青圓形底 + 線條圖示 */
#nexcircle-root .explore-card { padding: 2rem 1.75rem 1.75rem; }
#nexcircle-root .explore-icon {
width: 4.5rem;
height: 4.5rem;
margin: 0 0 1.4rem;
border-radius: 50%;
background: var(--nc-mint-soft);
color: var(--nc-primary-text);
display: flex;
align-items: center;
justify-content: center;
}
#nexcircle-root .explore-icon svg { width: 2rem; height: 2rem; }
#nexcircle-root .explore-card h3 { color: var(--nc-primary-text); }
#nexcircle-root .door-cta {
display: inline-flex;
align-items: center;
font-weight: 700;
color: var(--nc-ink);
letter-spacing: .06em;
}
#nexcircle-root .explore-card:hover .door-cta { text-decoration: none; }
/* 數字統計:Inter 大數字 */
#nexcircle-root .about-stat-num,
#nexcircle-root .result-stat strong {
font-family: var(--nc-font-en);
font-weight: 700;
letter-spacing: -.01em;
color: var(--nc-primary-text);
}
/* 小型狀態藥丸(pill-*、program-badge)保留形狀,換成新色調 */
#nexcircle-root .pill-cyan { background: var(--nc-mint-soft); color: var(--nc-primary-deep); }
#nexcircle-root .pill-slate { background: var(--nc-bg); color: var(--nc-muted); }
/* 表單 */
#nexcircle-root input,
#nexcircle-root select,
#nexcircle-root textarea {
border-radius: 12px;
border-color: var(--nc-line);
background: var(--nc-surface);
}
#nexcircle-root input:focus,
#nexcircle-root select:focus,
#nexcircle-root textarea:focus { outline: 2px solid var(--nc-primary); outline-offset: 1px; border-color: transparent; }
/* ---------- 主色大面板:節奏轉折 ---------- */
#nexcircle-root .nc-panel > .container {
background: var(--nc-primary);
color: #fff;
border-radius: var(--nc-radius-panel);
padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
width: min(1240px, calc(100% - 2rem));
}
#nexcircle-root .nc-panel .tag { color: #fff; }
#nexcircle-root .nc-panel h2 { color: #fff; }
#nexcircle-root .nc-panel h2 .ul,
#nexcircle-root .nc-panel h2 {
text-decoration: underline;
text-decoration-color: rgba(255,255,255,.85);
text-decoration-thickness: 2px;
text-underline-offset: .35em;
}
#nexcircle-root .nc-panel .lead,
#nexcircle-root .nc-panel .small-copy { color: rgba(255,255,255,.88); }
#nexcircle-root .nc-panel .aud-card { background: rgba(255,255,255,.12); color: #fff; }
#nexcircle-root .nc-panel .aud-card h3 { color: #fff; }
#nexcircle-root .nc-panel .aud-card p { color: rgba(255,255,255,.86); }
#nexcircle-root .nc-panel .display-en[data-en]::before {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: var(--nc-mint);
}
/* ---------- 深色收尾區 ---------- */
#nexcircle-root .section-dark { background: var(--nc-dark); }
#nexcircle-root .section-dark .tag { background: none; color: var(--nc-mint); }
#nexcircle-root .section-dark input { border-radius: 9999px; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.18); }
/* ---------- hero ---------- */
#nexcircle-root .hero { position: relative; overflow: hidden; padding: 5rem 0 6rem; }
#nexcircle-root .hero-mark {
position: absolute;
right: -6rem;
bottom: -5rem;
width: min(46vw, 560px);
opacity: .5;
pointer-events: none;
filter: brightness(0) invert(1);
}
#nexcircle-root .hero > .container { position: relative; }
#nexcircle-root .hero .tag { font-size: .95rem; margin-bottom: 1.4rem; }
/* 固定浮動 IG 按鈕:改成墨色圓鈕,拿掉漸層 */
#nexcircle-root .ig-help { background: var(--nc-ink); box-shadow: none; }
/* footer */
#nexcircle-root .footer { background: var(--nc-surface); border-top: 0; }
#nexcircle-root .footer .brand span,
#nexcircle-root .footer strong { font-family: var(--nc-font-en); }
@media (max-width: 760px) {
#nexcircle-root .section { padding: 4.5rem 0; }
#nexcircle-root .hero { padding: 3rem 0 4rem; }
#nexcircle-root { background-size: 56px 56px; }
#nexcircle-root .section-head { margin-bottom: 2rem; }
}
/* hero 標題只在標點斷行,避免「出門前，就／知道有位子」這種斷在詞中間 */
#nexcircle-root .hero h1 { word-break: keep-all; overflow-wrap: anywhere; }
/* 深色區與置中版面的展示字改成單色:漸層首字母是從元素左緣算起,
文字置中時會染錯位置 */
#nexcircle-root .section-dark .display-en[data-en]::before {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: var(--nc-mint);
}
/* ================================================================
靜態產生頁(/cities/ /visa/ /spaces/ /programs/ /insights/ /stories/
/data/ /calculator/ /research/ /nomadpass/),各自的根 class 不同,
用 :is() 一次涵蓋,權重跟各頁 CSS 的 .nc-xxx .yyy 相同,靠載入順序覆蓋
================================================================ */
html, body { background: var(--nc-bg); }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) {
font-family: var(--nc-font);
color: var(--nc-text);
letter-spacing: .04em;
line-height: 1.8;
min-height: 100vh;
background-color: var(--nc-bg);
background-image:
linear-gradient(var(--nc-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--nc-grid) 1px, transparent 1px);
background-size: 88px 88px;
background-position: center top;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator):lang(ja) { font-family: 'Noto Sans JP', 'Inter', 'Noto Sans TC', 'Noto Sans KR', system-ui, sans-serif; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator):lang(ko) { font-family: 'Noto Sans KR', 'Inter', 'Noto Sans TC', 'Noto Sans JP', system-ui, sans-serif; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator):lang(en) { font-family: var(--nc-font-en); letter-spacing: .01em; }
/* header */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header {
background: rgba(230, 238, 240, .82);
border-bottom: 0;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .brand,
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .brand span {
font-family: var(--nc-font-en);
font-weight: 700;
color: var(--nc-primary);
letter-spacing: .01em;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .home-link {
font-family: var(--nc-font-en);
color: var(--nc-ink);
font-weight: 500;
letter-spacing: .06em;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .home-link:hover { color: var(--nc-primary-text); text-decoration: none; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .breadcrumb,
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .breadcrumb a {
font-family: var(--nc-font-en);
letter-spacing: .08em;
color: var(--nc-muted);
}
/* 字級 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) h1 {
font-size: clamp(2rem, 5.4vw, 3.4rem);
font-weight: 700;
letter-spacing: .05em;
line-height: 1.35;
color: var(--nc-ink);
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) h2 {
font-weight: 700;
letter-spacing: .06em;
line-height: 1.5;
color: var(--nc-ink);
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) h3 {
font-weight: 700;
letter-spacing: .04em;
color: var(--nc-ink);
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.lead, .body-copy) { color: var(--nc-text); letter-spacing: .05em; line-height: 1.95; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .small-copy { color: var(--nc-muted); }
/* 卡片與區塊容器:扁平白卡 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(
.card, .program-card, .city-card, .country-card, .insight-card, .story-card, .tier-card,
.downloads-box, .visa-summary, .info-item, .fit-info, .next-step, .table-wrap, .sources,
.chart-card, .stat-card, .persona-card, .precedent-box, .role-card, .flow-box, .hyp-card, .cta-box, .field-timeline
) {
background: var(--nc-surface);
border-color: transparent;
border-radius: var(--nc-radius-card);
box-shadow: none;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.program-card, .city-card, .country-card, .insight-card, .story-card):hover {
box-shadow: none;
transform: none;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.program-card, .city-card, .country-card, .insight-card, .story-card):hover :is(h2, h3) { color: var(--nc-primary-text); }
/* 按鈕 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.btn, .btn-primary, .btn-outline, .pill-btn) {
border-radius: 9999px;
font-weight: 700;
letter-spacing: .08em;
box-shadow: none;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .btn-primary { background: var(--nc-primary); color: #fff; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .btn-primary:hover { background: var(--nc-primary-deep); transform: none; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .btn-outline {
background: var(--nc-surface);
color: var(--nc-ink);
border-color: transparent;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .btn-outline:hover { color: var(--nc-primary-text); background: var(--nc-surface); }
/* 篩選 chip:未選白底,選中主色 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.filter-chip, .type-filter button, .tag-chip) {
background: var(--nc-surface);
border-color: transparent;
color: var(--nc-ink);
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.filter-chip.active, .filter-chip[aria-pressed="true"], .type-filter button.active, .type-filter button[aria-pressed="true"]) {
background: var(--nc-primary);
color: #fff;
}
/* 小標籤 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .tag:not(.tag-warn) {
background: none;
padding-left: 0;
padding-right: 0;
color: var(--nc-ink);
letter-spacing: .12em;
font-weight: 500;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .pill-cyan { background: var(--nc-mint-soft); color: var(--nc-primary-deep); }
/* 表單 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(input, select, textarea) {
border-radius: 12px;
border-color: var(--nc-line);
background: var(--nc-surface);
}
/* 表格:表頭改墨色英文字距 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) th {
color: var(--nc-muted);
letter-spacing: .1em;
}
/* footer */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .footer {
background: var(--nc-surface);
border-top: 0;
}
/* 主色面板套在「關於我們」:段落文字反白,統計卡與團隊卡維持白卡深字 */
#nexcircle-root .nc-panel .section-head[data-en]::before {
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: var(--nc-mint);
}
#nexcircle-root .nc-panel .body-copy,
#nexcircle-root .nc-panel .fine-print { color: rgba(255,255,255,.9); }
#nexcircle-root .nc-panel .about-chip {
background: rgba(255,255,255,.14);
color: #fff;
border-color: transparent;
}
#nexcircle-root .nc-panel .about-stat .about-stat-label,
#nexcircle-root .nc-panel .team-card .team-role { color: var(--nc-muted); }
#nexcircle-root .nc-panel .team-card h3,
#nexcircle-root .nc-panel .team-card .team-info { color: var(--nc-ink); }
#nexcircle-root .nc-panel .btn-outline { background: #fff; color: var(--nc-ink); }
#nexcircle-root .nc-panel a:not(.btn) { color: #fff; }
#nexcircle-root .nc-panel .team-card a:not(.btn) { color: var(--nc-primary-text); }
/* 靜態頁 h1 上方的英文分類展示字,跟首頁區塊標題同一套語彙。
用根 class 對應分類,詳情頁(例如 /cities/taipei/)也會顯示分類字。
/research/ 與 /nomadpass/ 有自己的 hero,排除。 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator):not(.nc-research) h1:first-of-type::before {
display: block;
font-family: var(--nc-font-en);
font-size: clamp(3rem, 8vw, 5.6rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.035em;
margin-bottom: 1.1rem;
/* 首字母上色交給後面的 ::first-letter。這裡不能用 transparent + 漸層,
這條選擇器權重比後面的覆寫高,會讓首字母以外的字全部透明看不見 */
color: var(--nc-ink);
}
.nc-cities h1:first-of-type::before { content: "Cities"; content: "Cities" / ""; }
.nc-visa h1:first-of-type::before { content: "Visa"; content: "Visa" / ""; }
.nc-spaces h1:first-of-type::before { content: "Spaces"; content: "Spaces" / ""; }
.nc-programs:not(.nc-research):not(.nc-nomadpass):not(.nc-pass) h1:first-of-type::before { content: "Programs"; content: "Programs" / ""; }
:is(.nc-nomadpass, .nc-pass) h1:first-of-type::before { content: "Workday Pass"; content: "Workday Pass" / ""; }
.nc-insights h1:first-of-type::before { content: "Insights"; content: "Insights" / ""; }
.nc-stories h1:first-of-type::before { content: "Stories"; content: "Stories" / ""; }
.nc-data h1:first-of-type::before { content: "Data"; content: "Data" / ""; }
.nc-calculator h1:first-of-type::before { content: "Calculator"; content: "Calculator" / ""; }
/* ================================================================
手寫單頁(/plan/ /privacy/ 404):token 定義在 :root、樣式直接寫在
body 上,用 body.nc-plain 接手
================================================================ */
body.nc-plain {
font-family: var(--nc-font);
color: var(--nc-text);
letter-spacing: .04em;
line-height: 1.85;
background-color: var(--nc-bg);
background-image:
linear-gradient(var(--nc-grid) 1px, transparent 1px),
linear-gradient(90deg, var(--nc-grid) 1px, transparent 1px);
background-size: 88px 88px;
background-position: center top;
}
body.nc-plain :is(.header, header) { background: rgba(230, 238, 240, .82); border-bottom: 0; }
body.nc-plain .brand { font-family: var(--nc-font-en); color: var(--nc-primary); letter-spacing: .01em; }
body.nc-plain .home-link { font-family: var(--nc-font-en); color: var(--nc-ink); font-weight: 500; letter-spacing: .06em; }
body.nc-plain h1 { font-weight: 700; letter-spacing: .05em; line-height: 1.4; color: var(--nc-ink); }
body.nc-plain :is(h2, h3) { font-weight: 700; letter-spacing: .05em; color: var(--nc-ink); }
body.nc-plain :is(.card, .progress-card, .reveal-panel, .box, .contact, .note) {
background: var(--nc-surface);
border-color: transparent;
border-radius: var(--nc-radius-card);
box-shadow: none;
}
body.nc-plain .box { padding: 3rem 2rem; }
body.nc-plain .code {
font-family: var(--nc-font-en);
font-size: clamp(3.5rem, 12vw, 6rem);
font-weight: 700;
letter-spacing: -.03em;
line-height: 1;
color: var(--nc-primary);
}
body.nc-plain .links a { border-color: transparent; background: var(--nc-bg); color: var(--nc-ink); letter-spacing: .06em; }
body.nc-plain .links a.primary { background: var(--nc-primary); color: #fff; }
body.nc-plain :is(button, .btn, .lang-btn) { border-radius: 9999px; }
body.nc-plain .footer { background: var(--nc-surface); border-top: 0; }
/* 卡片頂部的主色漸層斜紋色塊(card-visual)換成平面淡青底,
[class] 用來把權重拉到跟各頁 .card-visual.visual-xxx 一樣高 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.card-visual, .hero-visual)[class] {
background: var(--nc-mint-soft);
background-image: none;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .hero-visual[class] :is(svg, .flag-emoji) { filter: none; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .hero-visual[class] svg { color: var(--nc-primary-text); }
/* 靜態頁手機版 header:連結不換行,最後一個「← 回首頁」隱藏(logo 本身就連回首頁) */
@media (max-width: 640px) {
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .home-link {
white-space: nowrap;
font-size: .8rem;
letter-spacing: .03em;
}
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .nav > :last-child > .home-link:last-child:not(:first-child) { display: none; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .nav > :last-child { gap: .65rem !important; }
/* 字標在手機也要顯示(Hank 2026-09-27 回饋只剩 icon 看不出是誰的網站) */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .brand { gap: .35rem; flex-shrink: 0; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .brand img { height: 1.35rem; width: auto; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .brand span { display: inline; font-size: .95rem; }
/* 放不下時(320px 小手機 + 三語切換)連結整排換到字標下方,放得下就維持一行 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .nav { flex-wrap: wrap; row-gap: .5rem; }
}
@media (max-width: 380px) {
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .brand span { font-size: .88rem; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .home-link { font-size: .74rem; letter-spacing: .01em; }
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .header .nav > :last-child { gap: .5rem !important; }
}
/* ================================================================
互動元件第二輪(2026-09-27):AI 顧問對話框、測驗/問卷選項、
nomadpass 單頁、提示框
================================================================ */
/* AI 顧問:外框透明,對話紀錄本身是白卡,氣泡去框線 */
#nexcircle-root .advisor-shell { background: transparent; border-radius: 0; max-width: 780px; }
#nexcircle-root .adv-example,
#nexcircle-root .adv-gate {
background: var(--nc-surface);
border: 0;
border-radius: var(--nc-radius-card);
padding: 1.5rem 1.75rem;
}
#nexcircle-root .adv-example-label { color: var(--nc-primary-text); letter-spacing: .12em; font-family: var(--nc-font-en); }
#nexcircle-root .adv-example-k { color: var(--nc-muted); letter-spacing: .08em; }
#nexcircle-root .adv-example-v { color: var(--nc-ink); }
#nexcircle-root .adv-log {
background: var(--nc-surface);
border: 0;
border-radius: 24px;
padding: 1.5rem;
gap: .9rem;
}
#nexcircle-root .adv-msg { border-radius: 18px; padding: .8rem 1.1rem; letter-spacing: .04em; }
#nexcircle-root .adv-bot { background: var(--nc-bg); border: 0; border-bottom-left-radius: 6px; }
#nexcircle-root .adv-user { background: var(--nc-primary); border-bottom-right-radius: 6px; }
#nexcircle-root .adv-plan { border-left: 0; background: var(--nc-mint-soft); }
#nexcircle-root .adv-suggest-chip {
background: var(--nc-surface);
border: 0;
color: var(--nc-ink);
letter-spacing: .04em;
padding: .5rem 1rem;
}
#nexcircle-root .adv-suggest-chip:hover { background: var(--nc-primary); color: #fff; border: 0; }
#nexcircle-root .adv-form input,
#nexcircle-root .adv-gate-row input {
border-radius: 9999px;
border: 0;
background: var(--nc-surface);
padding: .9rem 1.4rem;
}
#nexcircle-root .adv-gate-row input { background: var(--nc-bg); }
/* 測驗與問卷選項:淡青灰底列,選中/hover 主色 */
#nexcircle-root .quiz-shell,
#nexcircle-root .survey-shell { padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: 24px; }
#nexcircle-root .progress { background: var(--nc-bg); height: 4px; border-radius: 9999px; }
#nexcircle-root .progress > * { background: var(--nc-primary); border-radius: 9999px; }
#nexcircle-root .quiz-step-label,
#nexcircle-root .survey-part-title {
font-family: var(--nc-font-en);
color: var(--nc-primary-text);
letter-spacing: .14em;
font-weight: 600;
}
#nexcircle-root .quiz-q,
#nexcircle-root .survey-q { color: var(--nc-ink); letter-spacing: .05em; }
#nexcircle-root .quiz-opt,
#nexcircle-root .choice-item {
background: var(--nc-bg);
border: 1px solid transparent;
border-radius: 14px;
color: var(--nc-ink);
letter-spacing: .04em;
transition: background .2s ease, border-color .2s ease, color .2s ease;
}
#nexcircle-root .quiz-opt:hover,
#nexcircle-root .choice-item:hover { background: var(--nc-surface); border-color: var(--nc-primary); color: var(--nc-primary-text); }
#nexcircle-root .quiz-opt.selected,
#nexcircle-root .quiz-opt[aria-pressed="true"],
#nexcircle-root .choice-item.selected,
#nexcircle-root .choice-item:has(input:checked) { background: var(--nc-primary); border-color: var(--nc-primary); color: #fff; }
#nexcircle-root .result-city { font-family: var(--nc-font-en); letter-spacing: -.01em; }
#nexcircle-root .result-stat { background: var(--nc-bg); border: 0; border-radius: 14px; }
/* nomadpass 單頁 */
.nc-nomadpass .hero-badge { background: var(--nc-surface); color: var(--nc-ink); letter-spacing: .1em; }
.nc-nomadpass .step-num { background: var(--nc-primary); font-family: var(--nc-font-en); }
.nc-nomadpass :is(.price-card, .signup-box) {
background: var(--nc-surface);
border: 0;
border-radius: var(--nc-radius-card);
box-shadow: none;
}
.nc-nomadpass .price-value { font-family: var(--nc-font-en); color: var(--nc-primary-text); letter-spacing: -.01em; }
/* 提示框(琥珀色):保留「注意」語意,改成白卡加左側一條琥珀色短線,
不再整塊黃底 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) :is(.notice-box, .status-banner, .gap-box, .warn-box) {
background: var(--nc-surface) !important;
border: 0;
border-left: 3px solid #D08A2E;
border-radius: 0 var(--nc-radius-card) var(--nc-radius-card) 0;
}
body.nc-privacy h1::before {
content: "Privacy";
content: "Privacy" / "";
display: block;
font-family: var(--nc-font-en);
font-size: clamp(3rem, 8vw, 5.2rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.035em;
margin-bottom: 1rem;
color: var(--nc-ink);
}
/* 長文內文放在白底面板上,避免方格線干擾閱讀 */
:is(.nc-insights, .nc-stories, .nc-programs:not(.nc-research)) .article-body {
background: var(--nc-surface);
border-radius: var(--nc-radius-card);
padding: clamp(1.5rem, 4vw, 3rem);
margin-top: 1.5rem;
}
:is(.nc-insights, .nc-stories) .article-body h2 {
padding-top: .5rem;
border-top: 1px solid var(--nc-line);
margin-top: 2.5rem;
}
:is(.nc-insights, .nc-stories) .article-body h2:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
/* app.js 產生的線條圖示(取代裝飾 emoji) */
#nexcircle-root .nc-icon {
width: 4.5rem;
height: 4.5rem;
margin: 0 auto 1.2rem;
border-radius: 50%;
background: var(--nc-mint-soft);
color: var(--nc-primary-text);
display: flex;
align-items: center;
justify-content: center;
font-size: 0;
}
#nexcircle-root .nc-icon svg { width: 2rem; height: 2rem; }
/* 計算器分類圖示與 /plan/ 標題圖示:淡青圓底線條圖示 */
.nc-calculator .cat-icon {
width: 2.4rem;
height: 2.4rem;
border-radius: 50%;
background: var(--nc-mint-soft);
color: var(--nc-primary-text);
display: flex;
align-items: center;
justify-content: center;
}
body.nc-plain .card h2 .icon { border-radius: 50%; background: var(--nc-mint-soft); color: var(--nc-primary-text); }
body.nc-plain .persist-note .glyph { color: var(--nc-primary-text); display: inline-flex; }
/* 場地挑選器結果卡:去框線,淡青灰底,序號改主色 */
.nc-spaces .nc-m-card {
background: var(--nc-bg);
border: 0;
border-radius: 14px;
box-shadow: none;
}
.nc-spaces .nc-m-opt { border-radius: 9999px; }
/* ================================================================
共用元件(2026-09-27):之後新頁面一律用這組 class 組版,不要再各自
手刻一套。使用方式寫在 pm/design-system.md 的「ShareDan 語彙元件」。
適用在任何載入 theme.css 的頁面,不分首頁或靜態頁。
================================================================ */
/* 區塊標題: */
.nc-head { margin-bottom: 2.75rem; }
.nc-head[data-en]::before {
content: attr(data-en);
content: attr(data-en) / "";
display: block;
font-family: var(--nc-font-en);
font-size: clamp(3rem, 8.5vw, 5.8rem);
font-weight: 700;
line-height: 1;
letter-spacing: -.035em;
margin-bottom: .9rem;
color: var(--nc-ink);
}
.nc-label {
display: block;
font-size: .9rem;
font-weight: 500;
letter-spacing: .12em;
color: var(--nc-ink);
margin-bottom: 1.4rem;
}
.nc-head h2 { margin: 0 0 .9rem; }
.nc-lead { max-width: 42rem; color: var(--nc-text); letter-spacing: .05em; line-height: 2; margin: 0; }
/* 主色大面板與深色區:放在區塊外層 */
.nc-panel > .container,
.nc-panel-box {
background: var(--nc-primary);
color: #fff;
border-radius: var(--nc-radius-panel);
padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 5vw, 4.5rem);
}
.nc-panel :is(h2, h3, .nc-label) { color: #fff; }
.nc-panel .nc-lead,
.nc-panel p { color: rgba(255,255,255,.9); }
.nc-panel .nc-head[data-en]::before { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--nc-mint); }
.nc-dark { background: var(--nc-dark); color: #fff; }
.nc-dark :is(h2, h3, .nc-label) { color: #fff; }
.nc-dark p { color: rgba(255,255,255,.82); }
.nc-dark .nc-head[data-en]::before { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--nc-mint); }
/* 白卡與卡片格: */
.nc-card {
background: var(--nc-surface);
border-radius: var(--nc-radius-card);
padding: clamp(1.4rem, 3vw, 2rem);
color: var(--nc-text);
}
.nc-card h3 { margin: 0 0 .6rem; color: var(--nc-ink); }
.nc-card p { margin: 0; line-height: 1.9; }
.nc-panel .nc-card { background: rgba(255,255,255,.12); }
.nc-panel .nc-card :is(h3, p) { color: #fff; }
.nc-grid-3 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.nc-grid-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* 圖示圓: */
.nc-icon-circle {
width: 3.75rem; height: 3.75rem; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--nc-mint-soft); color: var(--nc-primary-text);
margin-bottom: 1.1rem;
}
.nc-icon-circle svg { width: 1.7rem; height: 1.7rem; }
.nc-panel .nc-icon-circle { background: rgba(255,255,255,.16); color: #fff; }
/* 按鈕 */
.nc-btn {
display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
border-radius: 9999px; padding: 1rem 2rem; border: 0;
font: inherit; font-weight: 700; letter-spacing: .08em; text-decoration: none;
cursor: pointer; transition: background .2s ease, color .2s ease;
}
.nc-btn.nc-btn-primary { background: var(--nc-primary-deep); color: #fff; }
.nc-btn.nc-btn-primary:hover { background: var(--nc-primary); color: #fff; }
.nc-btn.nc-btn-white { background: var(--nc-surface); color: var(--nc-ink); }
.nc-btn.nc-btn-white:hover { color: var(--nc-primary-text); }
.nc-btn-arrow::after {
content: ''; width: 1.6em; height: .6em; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24M19 1l5 4-5 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 10'%3E%3Cpath d='M0 5h24M19 1l5 4-5 4' fill='none' stroke='black' stroke-width='1.4'/%3E%3C/svg%3E") center / contain no-repeat;
transition: transform .25s ease;
}
.nc-btn-arrow:hover::after { transform: translateX(4px); }
/* 步驟編號 */
.nc-step-num {
font-family: var(--nc-font-en); font-weight: 700; font-size: .85rem; letter-spacing: .14em;
color: var(--nc-primary-text); display: block; margin-bottom: .8rem;
}
.nc-panel .nc-step-num { color: var(--nc-mint); }
/* 方案卡:價格位置用 .nc-plan-price,未定價時放文字說明 */
.nc-plan { display: flex; flex-direction: column; }
.nc-plan .nc-plan-for { font-size: .85rem; color: var(--nc-muted); letter-spacing: .08em; margin-bottom: .4rem; }
.nc-plan .nc-plan-price {
font-family: var(--nc-font-en); font-size: 1.05rem; font-weight: 600; letter-spacing: .06em;
color: var(--nc-primary-text); margin: 1rem 0 1.2rem; padding: .7rem 0;
border-top: 1px solid var(--nc-line); border-bottom: 1px solid var(--nc-line);
}
.nc-plan ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.nc-plan li { position: relative; padding-left: 1.4rem; line-height: 1.75; font-size: .95rem; }
.nc-plan li::before {
content: ''; position: absolute; left: 0; top: .72em; width: .7rem; height: .4rem;
border-left: 2px solid var(--nc-primary); border-bottom: 2px solid var(--nc-primary);
transform: translateY(-50%) rotate(-45deg);
}
.nc-plan.is-featured { outline: 2px solid var(--nc-primary); outline-offset: -2px; }
.nc-plan .nc-plan-flag {
align-self: flex-start; font-size: .75rem; font-weight: 700; letter-spacing: .1em;
background: var(--nc-primary); color: #fff; border-radius: 9999px; padding: .2rem .8rem; margin-bottom: .9rem;
}
/* 問答:原生 details */
.nc-faq details { background: var(--nc-surface); border-radius: var(--nc-radius-card); padding: 1.2rem 1.5rem; }
.nc-faq details + details { margin-top: .75rem; }
.nc-faq summary { cursor: pointer; font-weight: 700; color: var(--nc-ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; letter-spacing: .04em; }
.nc-faq summary::-webkit-details-marker { display: none; }
.nc-faq summary::after { content: '+'; font-family: var(--nc-font-en); color: var(--nc-primary-text); font-size: 1.3rem; line-height: 1; }
.nc-faq details[open] summary::after { content: '−'; }
.nc-faq details p { margin: .9rem 0 0; line-height: 1.95; color: var(--nc-text); }
/* 表單(深色區或白卡內皆可) */
.nc-form { display: grid; gap: 1.1rem; }
.nc-form label { display: grid; gap: .45rem; font-size: .9rem; font-weight: 600; letter-spacing: .06em; }
.nc-form :is(input, select, textarea) {
width: 100%; font: inherit; font-size: 1rem; letter-spacing: .03em;
border: 1px solid var(--nc-line); border-radius: 12px; background: var(--nc-surface);
color: var(--nc-ink); padding: .85rem 1rem; min-height: 50px;
}
.nc-form :is(input, select, textarea):focus { outline: 2px solid var(--nc-primary); outline-offset: 1px; border-color: transparent; }
.nc-dark .nc-form :is(input, select, textarea) { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.18); color: #fff; }
.nc-dark .nc-form select option { color: var(--nc-ink); }
.nc-form .nc-form-note { font-size: .82rem; letter-spacing: .04em; color: var(--nc-muted); margin: 0; }
.nc-dark .nc-form .nc-form-note { color: rgba(255,255,255,.6); }
.nc-form .nc-form-status { font-weight: 700; min-height: 1.2em; margin: 0; }
.nc-form .nc-form-status.is-ok { color: var(--nc-mint); }
.nc-form .nc-form-status.is-error { color: #F2A99A; }
/* 首頁窄螢幕 header(2026-09-27 全站 375px 稽核):英日文版的 CTA 與語言
按鈕文字較長,會把 header 撐出畫面。CTA 收字距、拿掉 BETA 小標,語言
按鈕只留地球圖示(按鈕本身有 aria-label="Language") */
@media (max-width: 480px) {
#nexcircle-root .nav { gap: .5rem; }
#nexcircle-root .nav-links { gap: .35rem; }
#nexcircle-root .nav-links .nav-cta { letter-spacing: .02em; padding: .5rem .95rem; font-size: .85rem; }
#nexcircle-root .nav-links .nav-cta .nav-badge { display: none; }
#nexcircle-root .lang-trigger { padding-left: .6rem; padding-right: .6rem; }
#nexcircle-root .lang-trigger #lang-current { display: none; }
}
/* 韓文排版:依空白斷詞,避免「구독/형」這種把一個詞拆兩行的斷法(全站適用) */
html[lang="ko"] body,
#nexcircle-root:lang(ko) {
word-break: keep-all;
overflow-wrap: break-word;
}
/* ================================================================
2026-09-27 手機版修正(Hank 回饋四點)
================================================================ */
/* 1. 斷行:中文只在標點與空白處斷行,不再把一個詞拆成兩行;段落避免最後
一行只剩一兩個字(text-wrap: pretty),標題行長平均(balance)。
overflow-wrap: break-word 是保險,極少數超長片段才會強制斷開。
日文用 auto-phrase(Chrome 依詞組斷行,不支援的瀏覽器維持原樣)。 */
html[lang^="zh"] body,
#nexcircle-root:lang(zh) {
word-break: keep-all;
overflow-wrap: anywhere;
}
/* anywhere 只在某個片語比整行還長時才會強制斷開,但它會讓容器可以縮窄,
避免卡片被最長的片語撐出畫面;表格改回 break-word,欄寬才不會被壓碎 */
:is(html[lang^="zh"] body, #nexcircle-root:lang(zh)) :is(table, th, td) { overflow-wrap: break-word; }
html[lang="ja"] body,
#nexcircle-root:lang(ja) {
word-break: keep-all;
overflow-wrap: anywhere;
}
:is(#nexcircle-root, .nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator, body.nc-plain)
:is(p, li, dd, .lead, .body-copy, .small-copy, .nc-lead) { text-wrap: pretty; }
:is(#nexcircle-root, .nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator, body.nc-plain)
:is(h1, h2, h3) { text-wrap: balance; }
/* 4. 英文展示字的首字母上色:改用 ::first-letter,只染真正的第一個字母,
取代先前用固定寬度漸層近似的做法(M、Q、A 這類寬字母會染到一半)。
::first-letter 會作用在 ::before 產生的文字上,所以不用改 HTML。 */
#nexcircle-root .section-head[data-en]::before,
#nexcircle-root .display-en[data-en]::before,
#nexcircle-root [data-en-wide]::before,
.nc-head[data-en]::before,
.nc-head[data-en-wide]::before,
.nc-head[data-en-narrow]::before,
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) h1:first-of-type::before,
.nc-insights h1:first-of-type::before,
body.nc-privacy h1::before {
background: none !important;
-webkit-background-clip: border-box !important;
background-clip: border-box !important;
color: var(--nc-ink);
}
#nexcircle-root .section-head[data-en]::first-letter,
#nexcircle-root .display-en[data-en]::first-letter,
.nc-head[data-en]::first-letter,
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator):not(.nc-research) h1:first-of-type::first-letter,
body.nc-privacy h1::first-letter {
color: var(--nc-primary);
}
/* 主色面板與深色區:整個展示字維持淡青色,首字母不另外染色 */
#nexcircle-root :is(.nc-panel, .section-dark) :is(.section-head, .display-en)[data-en]::before,
:is(.nc-panel, .nc-dark) .nc-head[data-en]::before { color: var(--nc-mint); }
#nexcircle-root :is(.nc-panel, .section-dark) :is(.section-head, .display-en)[data-en]::first-letter,
:is(.nc-panel, .nc-dark) .nc-head[data-en]::first-letter { color: var(--nc-mint); }
/* 2. 滑卡場地簡介:拿掉斜體(中文斜體是機器歪斜,很難讀),字色加深,
固定保留三行高度讓每張卡一致,資訊面板不再裁切長簡介 */
#nexcircle-root .space-match-card-panel { max-height: none; overflow: visible; }
#nexcircle-root .match-card-bio {
font-style: normal;
font-size: .9rem;
line-height: 1.75;
letter-spacing: .03em;
color: var(--nc-text);
min-height: calc(1.75em * 3);
overflow: visible;
margin: 0;
}
/* 3. 手機 header 顯示 NexCircle 字標(原本 640px 以下被隱藏) */
@media (max-width: 640px) {
#nexcircle-root .brand { gap: .4rem; }
#nexcircle-root .brand img { height: 1.5rem; }
#nexcircle-root .brand span { display: inline; font-size: 1rem; }
}
@media (max-width: 360px) {
#nexcircle-root .brand span { font-size: .92rem; }
#nexcircle-root .nav-links .nav-cta { padding: .45rem .75rem; }
}
/* 團隊卡手機版:頭像改放在文字上方,讓介紹文字用滿卡片寬度,
否則欄寬太窄,中文片語會被迫從中間斷開 */
@media (max-width: 640px) {
#nexcircle-root .team-card { flex-direction: column; gap: .9rem; padding: 1.5rem; }
}
/* 表格裡的連結(例如「前往預訂 →」)不斷行,箭頭不會單獨掉到下一行 */
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) td a { white-space: nowrap; }
/* 深色收尾區的名單表單:送出改成白色 pill 按鈕,跟全站其他表單一致;
手機版輸入框與按鈕上下排、都撐滿寬度 */
#nexcircle-root .section-dark .lead-form-plain-row { gap: .75rem; }
#nexcircle-root .section-dark .lead-form-plain-row input { border-radius: 9999px; min-height: 50px; padding: .8rem 1.3rem; }
#nexcircle-root .section-dark .lead-form-plain-row .link-plain {
background: var(--nc-surface);
color: var(--nc-ink);
text-decoration: none;
border-radius: 9999px;
padding: .85rem 1.6rem;
font-weight: 700;
letter-spacing: .08em;
white-space: nowrap;
}
#nexcircle-root .section-dark .lead-form-plain-row .link-plain:hover { color: var(--nc-mint); }
@media (max-width: 640px) {
#nexcircle-root .section-dark .lead-form-plain-row { flex-direction: column; align-items: stretch; }
#nexcircle-root .section-dark .lead-form-plain-row .link-plain { width: 100%; }
}
/* 文案分段:字典裡的空行(\n\n)由 app.js 的 setParas() 拆成 .nc-para 區塊,
靜態頁(build-pass.js)輸出 .nc-para-break。段距一律 1em,跟一般段落一致 */
.nc-para { display: block; }
.nc-para + .nc-para { margin-top: 1em; }
.nc-para-break { display: block; height: 1em; }
/* 易讀行長:中日文內文一行約 20 到 34 個字,段落寬度上限 36em;
英文約 65 個字元。手機寬度本來就更窄,不受影響 */
:is(#nexcircle-root, .nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator, body.nc-plain)
:is(.lead, .body-copy, .nc-lead, .article-body p) { max-width: 36em; }
:is(#nexcircle-root, .nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator):lang(en)
:is(.lead, .body-copy, .nc-lead, .article-body p) { max-width: 65ch; }
/* 桌機導覽列:項目最多的頁面(/about/ 八個項目)加上日文這種較長的語系,
原本 1120px 的容器怎麼樣都放不下。header 容器放寬到 1320px,1440px 以下
收字距與留白,1200px 以下直接改用漢堡選單(原本是 1024px) */
#nexcircle-root .header .container { width: min(1320px, 100%); }
@media (max-width: 1200px) {
#nexcircle-root .nav-links .nav-anchor { display: none; }
#nexcircle-root .nav-links .nav-cta { display: inline-block; }
#nexcircle-root .mobile-menu-trigger { display: inline-flex; }
}
@media (max-width: 1440px) {
#nexcircle-root .nav-links { gap: .15rem; }
#nexcircle-root .nav-links .nav-anchor { letter-spacing: .02em; padding-left: .65rem; padding-right: .65rem; }
}
/* 中文原文引言放在韓文、英文頁面時(Voices 區塊):韓文頁整頁是 keep-all,
中文沒有空白可斷就會撐破手機寬度。非中日文頁面裡標了 lang="zh-*" 的
元素改回逐字斷行(2026-09-27) */
html:not([lang^="zh"]):not([lang^="ja"]) [lang^="zh"] { word-break: normal; overflow-wrap: anywhere; }
/* ================================================================
對比與最小字級(2026-09-27,/impeccable critique 首頁 P1)
- 主色 #0C8EAA 當底、上面放白字只有 3.8:1,按鈕底改用 deep(5.6:1),
hover 再深一階,不再往淺色跳
- 深色區輸入框的 placeholder 原本 3.6:1
- 標籤、徽章、卡片數據小字原本 9.6-10.9px,最小改 12px
主色本身(展示字首字母、面板、圖示)不變,那些是大字或非文字,3:1 就夠
================================================================ */
#nexcircle-root .btn-primary,
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .btn-primary {
background: var(--nc-primary-deep);
color: #fff;
}
#nexcircle-root .btn-primary:hover,
:is(.nc-programs, .nc-cities, .nc-visa, .nc-data, .nc-insights, .nc-spaces, .nc-stories, .nc-calculator) .btn-primary:hover {
background: #085F73;
}
#nexcircle-root .btn-outline { color: var(--nc-primary-text); border-color: var(--nc-primary-text); }
#nexcircle-root .section-dark input::placeholder { color: #A3ACB0; opacity: 1; }
#nexcircle-root :is(.nav-badge, .program-badge, .testimonial-sample-tag, .space-match-type-badge) { font-size: max(12px, .72rem); }
#nexcircle-root .result-stat .k,
#nexcircle-root .result-stats.match-card-stats .k { font-size: max(12px, .74rem); }
/* 導覽列主按鈕改成較長的「Workday Pass」後,320px 會把語言按鈕擠出畫面 */
@media (max-width: 360px) {
#nexcircle-root .nav-links .nav-cta { letter-spacing: 0; padding: .45rem .6rem; font-size: .75rem; }
#nexcircle-root .nav-links { gap: .3rem; }
/* 語言按鈕只留地球圖示(按鈕本身有 aria-label="Language") */
#nexcircle-root .lang-trigger #lang-current { display: none; }
}
@media (max-width: 340px) {
#nexcircle-root .brand span { font-size: .85rem; }
#nexcircle-root .brand { gap: .3rem; }
#nexcircle-root .lang-trigger { padding-left: .5rem; padding-right: .5rem; }
#nexcircle-root .mobile-menu-trigger { width: 34px; height: 34px; }
}
/* ---------- 廣告版位 Banner(E27,2026-09-29)----------
內容來自 Notion「Banner」資料庫,經 Worker /banners 提供,沒有上架中的
Banner 時容器保持 hidden。整張卡是一個連結,「合作推廣」標籤固定顯示。 */
.nc-banner-wrap { margin-top: 3rem; }
.nc-banner-wrap[hidden] { display: none; }
.nc-banner {
display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 2rem; align-items: center;
background: var(--nc-surface); border-radius: var(--nc-radius-card); padding: 1.25rem;
color: var(--nc-text); text-decoration: none;
opacity: 0; transition: opacity .35s ease;
}
.nc-banner.is-in { opacity: 1; }
.nc-banner.no-image { grid-template-columns: minmax(0, 1fr); padding: 1.75rem 2rem; }
.nc-banner-img { width: 100%; aspect-ratio: 3 / 1; object-fit: cover; border-radius: 12px; background: var(--nc-mint-soft); display: block; }
.nc-banner-tag {
display: inline-block; font-size: max(12px, .72rem); letter-spacing: .08em; color: var(--nc-muted);
border: 1px solid #CFD8DB; border-radius: 9999px; padding: .1rem .7rem; margin-bottom: .6rem;
}
.nc-banner-title { margin: 0; font-size: 1.2rem; line-height: 1.6; color: var(--nc-ink); text-wrap: balance; }
.nc-banner-sub { margin: .35rem 0 0; font-size: .92rem; line-height: 1.9; letter-spacing: .05em; color: var(--nc-muted); text-wrap: pretty; }
.nc-banner-cta {
display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem;
background: var(--nc-primary-deep); color: #fff; border-radius: 9999px; padding: .55rem 1.3rem;
font-size: .9rem; font-weight: 700; letter-spacing: .08em; transition: background .2s ease;
}
.nc-banner:hover .nc-banner-cta { background: var(--nc-primary); }
.nc-banner:hover .nc-banner-title { color: var(--nc-primary-text); }
@media (max-width: 720px) {
.nc-banner { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem; }
.nc-banner.no-image { padding: 1.5rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .nc-banner { transition: none; } }
/* Banner 推薦碼標籤(2026-10-02):主色虛線框,碼本身不斷行 */
.nc-banner-code { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-top: .9rem; }
.nc-banner-code-chip {
display: inline-flex; align-items: center; gap: .55rem; white-space: nowrap;
border: 1.5px dashed var(--nc-primary); border-radius: 10px; background: var(--nc-mint-soft);
padding: .35rem .8rem;
}
.nc-banner-code-label { font-size: max(12px, .75rem); letter-spacing: .08em; color: var(--nc-primary-text); }
.nc-banner-code-value { font-family: Inter, sans-serif; font-size: 1.15rem; font-weight: 700; letter-spacing: .06em; color: var(--nc-ink); user-select: all; }
.nc-banner-code-note { font-size: .88rem; line-height: 1.7; letter-spacing: .04em; color: var(--nc-text); }
/* 靜態頁版位(2026-10-02):列表格裡整列寬,文章與城市頁上下留白 */
.card-grid > .nc-banner-wrap { grid-column: 1 / -1; margin: .5rem 0; }
.article-body + .nc-banner-wrap, .nc-cities .nc-banner-wrap, .nc-spaces .cta-row + .nc-banner-wrap { margin: 2.5rem 0; }