/* Shared TripWeather logo + dark-mode page styling. Edit here once — every TripWeather page picks it up. */ /* Logo — swaps with the active theme so the matching app icon always shows (light icon on light, dark icon on dark). */ .tw-logo { background-image: url(/shared/tripweather-icon.png); background-size: cover; background-position: center; background-repeat: no-repeat; display: inline-block; } [data-theme="light"] .tw-logo { background-image: url(/shared/tripweather-icon.png); } [data-theme="dark"] .tw-logo { background-image: url(/shared/tripweather-icon-dark.png); } @media (prefers-color-scheme: dark) { [data-theme="apple"] .tw-logo { background-image: url(/shared/tripweather-icon-dark.png); } } /* ===== Dark mode for the TripWeather pages (.tw-page on ) ===== */ /* The page-level inline styles are light by default; these override them when the active theme is dark (explicit data-theme="dark", or system-dark under the default "apple" theme). */ [data-theme="dark"] body.tw-page, [data-theme="dark"] body.tw-page .hero { background: #0c0d12 !important; color: #e9eaf2; } [data-theme="dark"] body.tw-page .hero { background: linear-gradient(180deg, #141826 0%, #0c0d12 100%) !important; } [data-theme="dark"] body.tw-page .hero h1 { color: #f2f4fb; } [data-theme="dark"] body.tw-page .hero p, [data-theme="dark"] body.tw-page .subtitle { color: #9aa1b8; } [data-theme="dark"] body.tw-page h1, [data-theme="dark"] body.tw-page h2, [data-theme="dark"] body.tw-page .apphead .name { color: #f2f4fb; } [data-theme="dark"] body.tw-page p { color: #aab0c4; } [data-theme="dark"] body.tw-page .feature, [data-theme="dark"] body.tw-page .contact-box { background: #161823 !important; border-color: #262a3a !important; } [data-theme="dark"] body.tw-page .feature h3 { color: #eef0f8; } [data-theme="dark"] body.tw-page .feature p { color: #9aa1b8; } [data-theme="dark"] body.tw-page .contact-box p[style] { color: #f2f4fb !important; } [data-theme="dark"] body.tw-page .footer { border-top-color: #262a3a; color: #767c92; } [data-theme="dark"] body.tw-page .apphead .links a { color: #9aa1b8; } @media (prefers-color-scheme: dark) { [data-theme="apple"] body.tw-page, [data-theme="apple"] body.tw-page .hero { background: #0c0d12 !important; color: #e9eaf2; } [data-theme="apple"] body.tw-page .hero { background: linear-gradient(180deg, #141826 0%, #0c0d12 100%) !important; } [data-theme="apple"] body.tw-page .hero h1 { color: #f2f4fb; } [data-theme="apple"] body.tw-page .hero p, [data-theme="apple"] body.tw-page .subtitle { color: #9aa1b8; } [data-theme="apple"] body.tw-page h1, [data-theme="apple"] body.tw-page h2, [data-theme="apple"] body.tw-page .apphead .name { color: #f2f4fb; } [data-theme="apple"] body.tw-page p { color: #aab0c4; } [data-theme="apple"] body.tw-page .feature, [data-theme="apple"] body.tw-page .contact-box { background: #161823 !important; border-color: #262a3a !important; } [data-theme="apple"] body.tw-page .feature h3 { color: #eef0f8; } [data-theme="apple"] body.tw-page .feature p { color: #9aa1b8; } [data-theme="apple"] body.tw-page .contact-box p[style] { color: #f2f4fb !important; } [data-theme="apple"] body.tw-page .footer { border-top-color: #262a3a; color: #767c92; } [data-theme="apple"] body.tw-page .apphead .links a { color: #9aa1b8; } }