/* Styling for static content pages (About, Privacy, FAQ, Contact, directory). Reuses theme custom-properties + .lang-switcher/.lang-btn/.theme-toggle-btn from style.css so the header matches the main app exactly. */ /* ── Language show/hide (client-side, keyed on ) ── */ [data-l] { display: none; } html[data-lang="en_US"] [data-l="en_US"], html[data-lang="zh_TW"] [data-l="zh_TW"], html[data-lang="zh_CN"] [data-l="zh_CN"] { display: revert; } body.content-page { background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; margin: 0; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* ── Header ── The content pages reuse the app's #header markup + classes (.header-left, .hamburger-*, .logo, .app-title, .header-right, .lang-switcher, .theme-toggle-btn) from style.css, so the bar matches the main page exactly. Only content-page-specific tweaks live here. */ body.content-page #header { position: sticky; top: 0; } .header-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; } .header-brand:hover { text-decoration: none; } .header-brand .app-title, .header-brand .app-tagline { display: block; } /* ── Main article ── */ .content-main { max-width: 820px; margin: 0 auto; padding: 32px 22px 56px; } .content-main h1 { font-size: 1.9rem; line-height: 1.25; margin: 0 0 6px; color: var(--text); } .content-main .lead { font-size: 1.08rem; color: var(--text-muted); margin: 0 0 28px; } .content-main h2 { font-size: 1.3rem; margin: 34px 0 10px; color: var(--text); } .content-main h3 { font-size: 1.08rem; margin: 22px 0 6px; color: var(--text); } .content-main p, .content-main li { color: var(--text); } .content-main a { color: var(--primary); } .content-main ul, .content-main ol { padding-left: 22px; } .content-main li { margin: 6px 0; } .content-updated { font-size: .85rem; color: var(--text-muted); margin-top: 4px; } .content-note { font-size: .9rem; color: var(--text-muted); border-left: 3px solid var(--border); padding: 6px 0 6px 14px; margin: 18px 0; } /* FAQ items */ .faq-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; margin: 14px 0; background: var(--white); } .faq-item h3 { margin: 0 0 6px; } .faq-item p:last-child { margin-bottom: 0; } /* ── Car-park directory ── */ .dir-district { margin: 28px 0 0; } .dir-district h2 { border-bottom: 2px solid var(--primary-light); padding-bottom: 6px; } .dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 14px; } .dir-card { display: block; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; background: var(--white); text-decoration: none; color: var(--text); transition: border-color .15s, box-shadow .15s; } .dir-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); } .dir-card .dir-name { font-weight: 600; display: block; } .dir-card .dir-name-cn { color: var(--text-muted); font-size: .9rem; display: block; } .dir-card .dir-addr { color: var(--text-muted); font-size: .85rem; display: block; margin-top: 4px; } .dir-toc { display: flex; flex-wrap: wrap; gap: 8px 14px; margin: 18px 0 8px; } .dir-toc a { color: var(--primary); text-decoration: none; font-size: .92rem; } /* ── Footer ── */ .content-footer { background: var(--white); border-top: 1px solid var(--border); padding: 32px 22px 0; } .content-footer-inner { max-width: 980px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 28px; } .content-footer-col strong { display: block; margin-bottom: 10px; color: var(--text); } .content-footer-col p { color: var(--text-muted); font-size: .9rem; margin: 0; } .content-footer-col a { display: block; color: var(--text-muted); text-decoration: none; font-size: .92rem; margin: 6px 0; } .content-footer-col a:hover { color: var(--primary); } .content-footer-base { max-width: 980px; margin: 24px auto 0; padding: 16px 0; border-top: 1px solid var(--border); color: var(--text-muted); font-size: .85rem; } .content-footer-base a { color: var(--text-muted); }