/* ============================================================ G20X site chrome — ONE header + footer for every page type ============================================================ Loaded by both page systems: · marketing pages (scripts/build_www_v2_2026_08_23.py) · attraction pages (scripts/unify_chrome_2026_08_23.py) The nav items come from a single definition (site_content.NAV), so the two generators cannot drift apart. Selectors are namespaced (.g20xbar/.g20xfoot) so this file is safe to drop onto the attraction pages, which carry their own inline stylesheet and do NOT load tiko.css. ============================================================ */ .g20xbar{ /* The attraction pages constrain to 820px, so this bar is sometimes handed 780px and sometimes the full window. A container query lets the same header adapt to the width it actually gets instead of guessing from the viewport. */ container-type:inline-size; container-name:g20xbar; position:sticky;top:0;z-index:9000; background:rgba(251,251,253,.82); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid rgba(0,0,0,.06); font:16px/1.4 -apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto, 'PingFang TC','Noto Sans TC','Microsoft JhengHei',sans-serif; color:#1D1D1F; } .g20xbar-in{ max-width:1080px;margin:0 auto;padding:0 28px;height:60px; display:flex;align-items:center;justify-content:space-between;gap:12px; } .g20xbar a{text-decoration:none} .g20xbar-logo{display:flex;align-items:center;gap:10px;flex-shrink:0} .g20xbar-logo img{height:36px;width:auto;object-fit:contain;display:block} .g20xbar nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap;justify-content:flex-end} .g20xbar nav a{ margin-left:4px;color:#86868B;font-size:14.5px;font-weight:500; padding:7px 14px;border-radius:999px;transition:color .2s,background .2s; } .g20xbar nav a:hover{color:#1D1D1F;background:rgba(0,0,0,.05)} .g20xbar nav a.active{color:#1D1D1F;background:rgba(0,0,0,.06)} .g20xbar .g20xbar-lang{ font-size:13px;margin-left:10px;border:1.5px solid #E5E5EA;border-radius:999px; padding:5px 14px;color:#86868B;font-weight:600;transition:border-color .2s,color .2s; } .g20xbar .g20xbar-lang:hover{border-color:#FF5A1F;color:#FF5A1F} /* ---- unified footer (compact variant, used by the attraction pages) ---- */ .g20xfoot{ border-top:1px solid #E5E5EA;background:#fff;margin-top:40px;padding:32px 20px; font:13.5px/1.7 -apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',Roboto, 'PingFang TC','Noto Sans TC',sans-serif; color:#86868B;text-align:center; } .g20xfoot-in{max-width:1080px;margin:0 auto} .g20xfoot img.flogo{height:44px;width:auto;opacity:.9;margin-bottom:12px} .g20xfoot a{color:#86868B;text-decoration:none;font-weight:600;white-space:nowrap} .g20xfoot a:hover{color:#FF5A1F} /* flex-wrap rather than inline: the generator joins these anchors with no whitespace, and each one is nowrap, so an inline row of English labels has no break opportunity at all and blows out the page width on a phone. */ .g20xfoot .links{display:flex;flex-wrap:wrap;justify-content:center; gap:6px 18px;margin-bottom:16px} .g20xfoot .fine{font-size:12.5px;max-width:860px;margin:0 auto} /* The attraction pages' "Buy" control was a dead