/* ── Good Mood Lipe Tour — dark theme ────────────────────────────────── The palette below re-points the design-system tokens at a navy night scale, so every component (cards, badges, fields, callouts) follows without being rewritten. A handful of targeted rules underneath fix the few places where the light theme hard-codes a colour. `data-theme` is written on by the inline script in index.html (saved choice, else the OS preference) and by the header toggle. */ :root { color-scheme: light } :root[data-theme="dark"] { color-scheme: dark; /* Grounds */ --paper: #102A3D; --paper-warm: #071726; --surface-page: #071726; --surface-card: #102A3D; --surface-sunk: #0C2133; --surface-menu: #102A3D; --surface-sand: #26394A; --surface-brand-soft: #12304A; --surface-deep: #061726; --surface-overlay: rgba(3, 12, 20, .66); --surface-header: rgba(7, 23, 38, .88); --surface-contact: #0A2036; --surface-footer: #061726; /* Text */ --text-body: #C7D6E1; --text-heading: #F1F7FB; --text-muted: #93A9B8; --text-faint: #6E8798; --text-link: #74B4EC; --text-link-hover: #A7D0F4; --ink-500: #93A9B8; /* Brand accents */ --brand-strong: #74B4EC; --brand-deep: #EAF4FD; --brand-tint: #12304A; --brand-soft: #17405F; /* Lines */ --border-hairline: #234459; --border-soft: #1D3B52; --border-strong: #2C5C80; /* Soft state fills */ --state-info-soft: #12304A; --state-success-soft: #16331E; --state-warning-soft: #3A2D14; --state-danger-soft: #3A1E17; /* Glass + shadows read differently at night */ --glass: rgba(7, 23, 38, .68); --glass-deep: rgba(3, 12, 20, .6); --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4); --shadow-sm: 0 2px 8px rgba(0, 0, 0, .42); --shadow-card: 0 6px 20px rgba(0, 0, 0, .46); --shadow-lift: 0 12px 32px rgba(0, 0, 0, .55); --shadow-modal: 0 24px 64px rgba(0, 0, 0, .65); --shadow-inset-sunk: inset 0 1px 2px rgba(0, 0, 0, .3); --ring-focus: 0 0 0 3px rgba(116, 180, 236, .38); --hero-scrim: linear-gradient(to top, rgba(4, 15, 26, .9) 0%, rgba(4, 15, 26, .64) 22%, rgba(4, 15, 26, .32) 44%, rgba(4, 15, 26, .1) 70%, rgba(4, 15, 26, 0) 100%); --hero-fallback: linear-gradient(160deg, #1B5C97, #071726); } /* ── Logo swaps to the light-on-dark wordmark ─────────────────────── */ [data-theme="dark"] .logo-on-light { display: none } [data-theme="dark"] .logo-on-dark { display: block } /* ── Places the light theme hard-codes a colour ───────────────────── */ [data-theme="dark"] .gm-badge--info { color: #A7D0F4 } [data-theme="dark"] .gm-badge--success { color: #9BD374 } [data-theme="dark"] .gm-badge--warning { color: #F0C877 } [data-theme="dark"] .gm-badge--danger { color: #F2704F } [data-theme="dark"] .gm-badge--sand { color: #F1D3B1 } /* จุดปลายทางของไทม์ไลน์ใช้พื้นสีเดียวกับป้ายทราย จึงต้องเปลี่ยนสีตัวอักษรตามด้วย */ [data-theme="dark"] .plan__step--end .plan__num, [data-theme="dark"] .route__step--end .route__icon { color: var(--sand-300) } [data-theme="dark"] .gm-callout { color: #C4DDF5 } [data-theme="dark"] .gm-callout--warning { color: #F0D3A0 } [data-theme="dark"] .gm-callout--success { color: #B6E39A } [data-theme="dark"] .gm-callout--tip { color: #F1D3B1 } [data-theme="dark"] .gm-btn--primary:hover { background: var(--sea-500) } [data-theme="dark"] .gm-btn--primary:active { background: var(--sea-600) } /* ชิปที่ถูกเลือก — โหมดมืดต้องใช้ตัวอักษรสีอ่อน ไม่งั้นอ่านแทบไม่ออก */ [data-theme="dark"] .gm-tag.is-selected { background: var(--brand-soft); border-color: var(--sea-600); color: var(--sea-100); } [data-theme="dark"] .gm-tab.is-active { background: #1B4059; color: #A7D0F4 } [data-theme="dark"] .gm-iconbtn--glass { color: #EAF4FD } [data-theme="dark"] .review__avatar { color: #A7D0F4 } [data-theme="dark"] .gm-stat--calm .gm-stat__icon { color: #9BD374 } [data-theme="dark"] .gm-tip__bubble { background: #1B4059 } [data-theme="dark"] .mobile-nav { box-shadow: 0 14px 30px rgba(0, 0, 0, .55) } [data-theme="dark"] .site-footer__legal { border-top-color: rgba(255, 255, 255, .1) } /* Photo placeholders: sunlit gradients would glare against a night page */ [data-theme="dark"] .gm-photo { background: linear-gradient(160deg, #16344B, #22405A 68%, #33506B) } [data-theme="dark"] .gm-photo--deep { background: linear-gradient(160deg, #1B5C97, #0A2E4F) } [data-theme="dark"] .gm-photo--sand { background: linear-gradient(160deg, #3A3226, #5C4B33) } [data-theme="dark"] .gm-photo::after { opacity: .18 } [data-theme="dark"] .gm-photo__label { color: #EAF4FD } /* Native date picker / scrollbars follow the theme via color-scheme, but Chrome still needs a nudge for the calendar glyph. */ [data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.7) }