/** * Block browser Force Dark / auto-inversion on every page. * color-scheme: only light — do NOT declare light dark (triggers Samsung algorithm). * Pin critical surfaces with explicit hex so partial inversion cannot break contrast. */ :root, html { color-scheme: only light !important; forced-color-adjust: none; -webkit-forced-color-adjust: none; } *, *::before, *::after { forced-color-adjust: none; -webkit-forced-color-adjust: none; } html, body { color-scheme: only light !important; } /* —— Page shells —— */ html[data-theme='light'] body, html[data-theme='light'] .app-shell, html[data-theme='light'] .home-shell, html[data-theme='light'] .topic-shell { background-color: #f7f8fc !important; color: #1b264f !important; } html[data-theme='dark'] body, html[data-theme='dark'] .app-shell, html[data-theme='dark'] .home-shell, html[data-theme='dark'] .topic-shell, html[data-theme='dark'] .standard-page, html[data-theme='dark'] .author-page, html[data-theme='dark'] .travel-page, html[data-theme='dark'] .wallet-page, html[data-theme='dark'] .auth-page, html[data-theme='dark'] .admin-page { background-color: #0f1428 !important; color: #eef1ff !important; } html[data-theme='dark'] .text-muted, html[data-theme='dark'] .load-section-skeleton, html[data-theme='dark'] .load-section-skeleton-label, html[data-theme='dark'] .page-standard-lead { color: #c5cee8 !important; -webkit-text-fill-color: #c5cee8 !important; } html[data-theme='light'] .text-muted, html[data-theme='light'] .load-section-skeleton, html[data-theme='light'] .load-section-skeleton-label { color: #5c6478 !important; -webkit-text-fill-color: #5c6478 !important; } /* OS dark + user chose light in app */ @media (prefers-color-scheme: dark) { html[data-theme-preference='light'], html[data-theme-preference='light'] body, html[data-theme='light'][data-theme-preference='light'] .home-shell, html[data-theme='light'][data-theme-preference='light'] .app-shell, html[data-theme='light'][data-theme-preference='light'] .topic-shell { background-color: #f7f8fc !important; color: #1b264f !important; color-scheme: only light !important; } } /* —— Home nav (transparent bar) —— * NOTE: `home-page` is on , so use html.home-page[data-theme=…] * (compound). A descendant combinator `html[data-theme] .home-page` never matches. */ html.home-page[data-theme='light'] #site-nav .nav-left .logo, html.home-page[data-theme='light'] #site-nav .logo-text { color: #1b264f !important; -webkit-text-fill-color: #1b264f !important; } html.home-page[data-theme='dark'] #site-nav .nav-left .logo, html.home-page[data-theme='dark'] #site-nav .logo-text { color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } /* Scroll frost: ~60% glass — keyed off html.is-nav-scrolled (survives nav re-render) */ html.home-page.is-nav-scrolled #site-nav .navbar, html.home-page.is-nav-scrolled #site-nav { background: rgb(255 255 255 / 60%) !important; backdrop-filter: blur(16px) saturate(1.2) !important; -webkit-backdrop-filter: blur(16px) saturate(1.2) !important; border-bottom: 1px solid rgb(232 236 244 / 55%) !important; box-shadow: 0 1px 0 rgb(255 255 255 / 35%) inset !important; } html.home-page.is-nav-scrolled[data-theme='dark'] #site-nav .navbar, html.home-page.is-nav-scrolled[data-theme='dark'] #site-nav { background: rgb(15 20 40 / 60%) !important; border-bottom-color: rgb(42 53 96 / 55%) !important; box-shadow: 0 1px 0 rgb(255 255 255 / 4%) inset !important; } /* Wallet pill: always light surface + navy text (beats layout.css blanket dark home pill rule) */ html.home-page #site-nav .nav-account-pill--wallet { background: rgb(255 255 255 / 92%) !important; border: 1px solid rgb(91 127 255 / 28%) !important; color: #1b264f !important; -webkit-text-fill-color: #1b264f !important; color-scheme: only light !important; } html.home-page #site-nav .nav-account-pill--wallet .nav-account-amount { color: #1b264f !important; -webkit-text-fill-color: #1b264f !important; } html.home-page[data-theme='dark'] #site-nav .nav-account-pill--login { background: #1a2242 !important; border: 1px solid rgb(139 168 255 / 55%) !important; color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } /* —— Merchant / provider sheet (mounts on body, outside .travel-page) —— * Do NOT set -webkit-text-fill-color on the panel — it inherits into the * dark CTA and makes「網上預訂」invisible (fill color overrides `color`). */ html[data-theme='light'] .travel-provider-sheet .travel-provider-panel { background-color: #ffffff !important; color: #0f172a !important; color-scheme: only light !important; } html[data-theme='light'] .travel-provider-sheet .travel-provider-title, html[data-theme='light'] .travel-provider-sheet .travel-provider-offer, html[data-theme='light'] .travel-provider-sheet .travel-cashback-table td { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html[data-theme='light'] .travel-provider-sheet .travel-cashback-table th, html[data-theme='light'] .travel-provider-sheet .travel-provider-notes { color: #5c6478 !important; -webkit-text-fill-color: #5c6478 !important; } html[data-theme='light'] .travel-provider-sheet .travel-provider-notes { background-color: #f8fafc !important; } html[data-theme='light'] .travel-provider-sheet .travel-provider-notes strong { color: #0f172a !important; -webkit-text-fill-color: #0f172a !important; } html[data-theme='light'] .travel-provider-sheet .travel-provider-sticky { background-color: #ffffff !important; border-top-color: #e2e8f0 !important; } html[data-theme='light'] .travel-provider-sheet .travel-provider-cta { background-color: #0f172a !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } html[data-theme='dark'] .travel-provider-sheet .travel-provider-panel { background-color: #1a2242 !important; color: #eef1ff !important; color-scheme: only light !important; } html[data-theme='dark'] .travel-provider-sheet .travel-provider-title, html[data-theme='dark'] .travel-provider-sheet .travel-provider-offer, html[data-theme='dark'] .travel-provider-sheet .travel-cashback-table td { color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } html[data-theme='dark'] .travel-provider-sheet .travel-cashback-table th, html[data-theme='dark'] .travel-provider-sheet .travel-provider-notes { color: #9aa3c4 !important; -webkit-text-fill-color: #9aa3c4 !important; } html[data-theme='dark'] .travel-provider-sheet .travel-provider-notes { background-color: #151b35 !important; } html[data-theme='dark'] .travel-provider-sheet .travel-provider-notes strong { color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } html[data-theme='dark'] .travel-provider-sheet .travel-provider-sticky { background-color: #1a2242 !important; border-top-color: #2a3558 !important; } html[data-theme='dark'] .travel-provider-sheet .travel-provider-cta { background-color: #eef1ff !important; color: #0f1428 !important; -webkit-text-fill-color: #0f1428 !important; } /* —— Hero search —— */ html[data-theme='dark'] .home-search, html[data-theme='dark'] .home-hero .home-search { background-color: #1a2242 !important; border: none !important; color: #eef1ff !important; } html[data-theme='dark'] .home-search-ghost { color: #c5cee8 !important; -webkit-text-fill-color: #c5cee8 !important; } html[data-theme='dark'] .home-search-ghost-term { color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } html[data-theme='dark'] .home-search-input { color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } /* Keep the animated ghost as the only idle label — Force Dark fill must not un-hide the native placeholder (otherwise "想去…玩？" stacks on top of it). */ html[data-theme='dark'] .home-search-input:placeholder-shown:not(:focus) { color: transparent !important; -webkit-text-fill-color: transparent !important; caret-color: transparent !important; } html[data-theme='dark'] .home-search-input::placeholder, html[data-theme='light'] .home-search-input::placeholder { color: transparent !important; -webkit-text-fill-color: transparent !important; opacity: 0 !important; } html[data-theme='light'] .home-search, html[data-theme='light'] .home-hero .home-search { background-color: #ffffff !important; color: #1b264f !important; } /* —— Article / stream cards —— */ html[data-theme='dark'] .card-article, html[data-theme='dark'] .post-card, html[data-theme='dark'] .stream-card, html[data-theme='dark'] .topic-article-card, html[data-theme='dark'] .family-card { background-color: #1a2242 !important; border-color: #2a3558 !important; color: #eef1ff !important; } html[data-theme='dark'] .post-card-body, html[data-theme='dark'] .stream-card-body, html[data-theme='dark'] .card-article-body, html[data-theme='dark'] .family-card-body { background-color: #1a2242 !important; color: #eef1ff !important; } html[data-theme='dark'] .post-card h3, html[data-theme='dark'] .stream-card-body h3, html[data-theme='dark'] .card-article-body h3 { color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } html[data-theme='dark'] .post-card-excerpt, html[data-theme='dark'] .post-card-author, html[data-theme='dark'] .post-card-author-name, html[data-theme='dark'] .post-card-stats, html[data-theme='dark'] .post-card-stat, html[data-theme='dark'] .post-card-meta { color: #c5cee8 !important; -webkit-text-fill-color: #c5cee8 !important; } html[data-theme='light'] .card-article, html[data-theme='light'] .post-card, html[data-theme='light'] .stream-card, html[data-theme='light'] .topic-article-card, html[data-theme='light'] .family-card { background-color: #ffffff !important; border-color: #e8ecf4 !important; color: #1b264f !important; } html[data-theme='light'] .post-card-body, html[data-theme='light'] .stream-card-body, html[data-theme='light'] .card-article-body { background-color: #ffffff !important; color: #1b264f !important; } html[data-theme='light'] .post-card h3, html[data-theme='light'] .stream-card-body h3 { color: #1b264f !important; -webkit-text-fill-color: #1b264f !important; } html[data-theme='light'] .post-card-excerpt, html[data-theme='light'] .post-card-author, html[data-theme='light'] .post-card-stats { color: #5c6478 !important; -webkit-text-fill-color: #5c6478 !important; } /* —— Discovery destination badges (white blobs fix) —— */ html[data-theme='dark'] .discovery-card-badge { background-color: rgb(15 20 40 / 78%) !important; color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } html[data-theme='light'] .discovery-card-badge { background-color: rgb(255 255 255 / 92%) !important; color: #1b264f !important; -webkit-text-fill-color: #1b264f !important; } /* —— Home rank hscroll cards (white card blobs in dark mode) —— */ html[data-theme='dark'] .home-rank-hscroll-card { background-color: #1a2242 !important; border-color: #2a3560 !important; color: #eef1ff !important; } html[data-theme='dark'] .home-rank-hscroll-title, html[data-theme='dark'] .home-rank-panel-title { color: #eef1ff !important; -webkit-text-fill-color: #eef1ff !important; } html[data-theme='dark'] .home-rank-hscroll-meta { color: #b8c2e0 !important; -webkit-text-fill-color: #b8c2e0 !important; } html[data-theme='dark'] .home-rank-hscroll-num { color: #8ba8ff !important; -webkit-text-fill-color: #8ba8ff !important; } html[data-theme='dark'] .stream-card-share { background-color: #1a2242 !important; color: #c5cee8 !important; } html[data-theme='light'] .stream-card-share { background-color: rgb(255 255 255 / 92%) !important; color: #5c6478 !important; }