/* ===== CSC Grants Guide — Civic Plain (Traditional Chinese) ===== */ :root { --primary: #0f4c81; --primary-hover: #0a3a66; --primary-tint: #dde7f0; --accent: #c2410c; --accent-hover: #9a340a; --surface: #faf7f2; --surface-elevated: #ffffff; --border: #e5dfd3; --hairline: #cdc1aa; --text: #0b1726; --text-muted: #3d4852; --success: #0f6b3e; --surface-success: #dcfce7; --warning: #b45309; --focus-ring: #c2410c; /* Grant accent — CWOP (state, worker-rights) vs CSBG (federal, anti-poverty) */ --cwop: #0f4c81; --cwop-tint: #dde7f0; --csbg: #6d28d9; --csbg-tint: #ede9fe; --max-width: 760px; --max-width-hub: 960px; --pad-mobile: 16px; --pad-tablet: 24px; --pad-desktop: 32px; --radius: 8px; /* English falls back to system-ui if Inter not installed (keeps CSP strict — no font CDN). */ --font-en: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Traditional Chinese ONLY — CSC accepts Traditional, never Simplified. System fonts, no CDN. */ --font-zh: "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Heiti TC", sans-serif; --font-display: "Fraunces", ui-serif, Georgia, "Times New Roman", serif; --font-stack: var(--font-en); } /* zh-Hant = Traditional. body.zh is the toggle hook. */ body.zh { --font-stack: var(--font-zh); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--surface); color: var(--text); font-family: var(--font-stack); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } body { display: flex; flex-direction: column; min-height: 100vh; } /* ---- Bilingual paired-span toggle ---- Scoped to DESCENDANTS of body so the body.zh toggle class itself is never hidden (a bare `.zh { display:none }` would match and blank the page). */ body:not(.zh) .zh, body:not(.zh) .zh-block { display: none; } /* English mode: hide Chinese */ body.zh .en, body.zh .en-block { display: none; } /* Chinese mode: hide English */ a { color: var(--primary); } a:hover { color: var(--primary-hover); } /* ---- Site chrome ---- */ .site-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px var(--pad-mobile); background: var(--surface-elevated); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20; } .site-header .brand { font-weight: 700; color: var(--primary); text-decoration: none; font-size: 17px; } .site-header nav { display: flex; gap: 8px; align-items: center; } .site-header nav a { text-decoration: none; color: var(--text-muted); font-size: 15px; padding: 6px 10px; border-radius: 6px; } .site-header nav a:hover { background: var(--primary-tint); color: var(--primary); } .lang-btn { font: inherit; font-size: 15px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--hairline); background: var(--surface-elevated); color: var(--text); border-radius: 999px; cursor: pointer; } .lang-btn:hover { border-color: var(--primary); color: var(--primary); } .lang-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } main { flex: 1; width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 28px var(--pad-mobile) 40px; } main.hub { max-width: var(--max-width-hub); } @media (min-width: 768px) { main { padding: 36px var(--pad-tablet) 48px; } .site-header { padding: 14px var(--pad-tablet); } } @media (min-width: 1024px) { main { padding: 44px var(--pad-desktop) 56px; } .site-header { padding: 14px var(--pad-desktop); } } h1, h2, h3 { margin: 0 0 12px; font-weight: 700; line-height: 1.3; color: var(--text); } h1 { font-size: 28px; } h2 { font-size: 22px; margin-top: 32px; } h3 { font-size: 18px; margin-top: 20px; } @media (min-width: 768px) { h1 { font-size: 34px; } h2 { font-size: 25px; } h3 { font-size: 19px; } } .eyebrow { display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 8px; } p { margin: 0 0 16px; } ul, ol { margin: 0 0 16px; padding-left: 24px; } li { margin-bottom: 8px; } .lede { font-size: 19px; color: var(--text-muted); } @media (min-width: 768px) { .lede { font-size: 21px; } } /* ---- Hub grant cards ---- */ .grant-grid { display: grid; gap: 20px; margin: 28px 0; } @media (min-width: 768px) { .grant-grid { grid-template-columns: 1fr 1fr; } } .grant-card { display: block; text-decoration: none; color: inherit; background: var(--surface-elevated); border: 1px solid var(--border); border-top: 4px solid var(--card-color, var(--primary)); border-radius: var(--radius); padding: 22px; transition: box-shadow .15s ease, transform .15s ease; } .grant-card:hover { box-shadow: 0 6px 22px rgba(15,23,38,.10); transform: translateY(-2px); } .grant-card .tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--card-color, var(--primary)); background: var(--card-tint, var(--primary-tint)); padding: 3px 10px; border-radius: 999px; margin-bottom: 10px; } .grant-card h2 { margin: 0 0 6px; font-size: 22px; } .grant-card .acronym { color: var(--card-color, var(--primary)); } .grant-card p { font-size: 16px; color: var(--text-muted); margin-bottom: 0; } .grant-card .more { margin-top: 14px; font-weight: 600; color: var(--card-color, var(--primary)); font-size: 15px; } /* ---- Report page building blocks (used by cwop/ and csbg/) ---- */ .callout { background: var(--primary-tint); border-left: 4px solid var(--primary); border-radius: 0 6px 6px 0; padding: 14px 18px; margin: 0 0 20px; } .callout.warn { background: #fff4e6; border-left-color: var(--warning); } .callout p:last-child { margin-bottom: 0; } .factbar { display: grid; gap: 10px; grid-template-columns: 1fr; margin: 0 0 24px; padding: 0; list-style: none; } @media (min-width: 640px) { .factbar { grid-template-columns: repeat(3, 1fr); } } .factbar li { background: var(--surface-elevated); border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin: 0; } .factbar .k { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); font-weight: 700; } .factbar .v { display: block; font-size: 17px; font-weight: 600; margin-top: 4px; } .section-nav { position: sticky; top: 64px; background: var(--surface); padding: 8px 0; margin-bottom: 20px; border-bottom: 1px solid var(--border); font-size: 14px; } .section-nav a { margin-right: 14px; white-space: nowrap; } /* keep anchor-jump targets clear of the sticky header + section-nav */ main [id] { scroll-margin-top: 124px; } table.simple { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: 16px; } table.simple th, table.simple td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); vertical-align: top; } table.simple th { background: var(--primary-tint); font-weight: 700; } .badge-yes { color: var(--success); font-weight: 700; } .badge-no { color: var(--accent); font-weight: 700; } /* On narrow screens, force tables to wrap within the viewport (no horizontal overflow). Desktop keeps natural auto-layout. */ @media (max-width: 560px) { table.simple { table-layout: fixed; } table.simple th, table.simple td { word-break: break-word; overflow-wrap: anywhere; } } .confirm-flag { display: inline-block; font-size: 12px; font-weight: 700; background: #fff4e6; color: var(--warning); border: 1px solid #f0c986; border-radius: 4px; padding: 1px 6px; margin-left: 4px; } .deck-cta { display: inline-flex; align-items: center; gap: 8px; background: var(--primary); color: #fff; text-decoration: none; padding: 11px 18px; border-radius: 8px; font-weight: 600; font-size: 16px; margin: 4px 8px 4px 0; } .deck-cta:hover { background: var(--primary-hover); color: #fff; } .deck-cta.ghost { background: transparent; color: var(--primary); border: 1px solid var(--hairline); } .deck-cta.ghost:hover { background: var(--primary-tint); } /* ---- Footer ---- */ .site-footer { border-top: 1px solid var(--border); padding: 20px var(--pad-mobile); font-size: 14px; color: var(--text-muted); text-align: center; } .site-footer .disclaimer { max-width: 640px; margin: 0 auto; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }