/* getaway-explorer — shared tokens & layout. Palette: cool green (points/deals) on a slightly green-biased neutral. Both themes are authored; the toggle stamps data-theme on . */ :root { --bg: #F5F7F6; --panel: #FFFFFF; --ink: #1C2422; --ink2: #5A6662; --ink3: #93A09A; --line: #E2E8E5; --accent: #1F7A5F; --accent-soft: #E6F2ED; --d1: #124D3B; --d1-ink: #FFFFFF; --d2: #2F9573; --d2-ink: #FFFFFF; --d3: #7FCBB2; --d3-ink: #12281F; --d4: #D8EFE6; --d4-ink: #2C4A3E; --none-line: #C7D2CC; --warn: #9A6B14; --warn-bg: #F7EDD8; --bad: #B4372A; --bad-bg: #F9E8E5; --rain: #3E7CB8; --band1: #1F7A5F; --band2: #3E7CB8; --band3: #9A6B14; --tip-bg: #1C2422; --tip-ink: #F5F7F6; --tip-bad: #FF9B8A; --shadow: 0 4px 16px rgba(20, 40, 33, .12); } @media (prefers-color-scheme: dark) { :root { --bg: #121917; --panel: #1A2320; --ink: #E8EEEB; --ink2: #9DABA4; --ink3: #64726B; --line: #2A3630; --accent: #6FD4AC; --accent-soft: #1D332C; --d1: #8FE7C0; --d1-ink: #0D241A; --d2: #4AA47D; --d2-ink: #06130D; --d3: #2F6650; --d3-ink: #D7EFE3; --d4: #1D332C; --d4-ink: #A9C4B7; --none-line: #3A4A42; --warn: #D8A94E; --warn-bg: #362B14; --bad: #F08D7C; --bad-bg: #3A211D; --rain: #7FB3E3; --band1: #6FD4AC; --band2: #7FB3E3; --band3: #D8A94E; --tip-bg: #E8EEEB; --tip-ink: #1C2422; --tip-bad: #B4372A; --shadow: 0 4px 16px rgba(0, 0, 0, .35); } } :root[data-theme="dark"] { --bg: #121917; --panel: #1A2320; --ink: #E8EEEB; --ink2: #9DABA4; --ink3: #64726B; --line: #2A3630; --accent: #6FD4AC; --accent-soft: #1D332C; --d1: #8FE7C0; --d1-ink: #0D241A; --d2: #4AA47D; --d2-ink: #06130D; --d3: #2F6650; --d3-ink: #D7EFE3; --d4: #1D332C; --d4-ink: #A9C4B7; --none-line: #3A4A42; --warn: #D8A94E; --warn-bg: #362B14; --bad: #F08D7C; --bad-bg: #3A211D; --rain: #7FB3E3; --band1: #6FD4AC; --band2: #7FB3E3; --band3: #D8A94E; --tip-bg: #E8EEEB; --tip-ink: #1C2422; --tip-bad: #B4372A; --shadow: 0 4px 16px rgba(0, 0, 0, .35); } :root[data-theme="light"] { --bg: #F5F7F6; --panel: #FFFFFF; --ink: #1C2422; --ink2: #5A6662; --ink3: #93A09A; --line: #E2E8E5; --accent: #1F7A5F; --accent-soft: #E6F2ED; --d1: #124D3B; --d1-ink: #FFFFFF; --d2: #2F9573; --d2-ink: #FFFFFF; --d3: #7FCBB2; --d3-ink: #12281F; --d4: #D8EFE6; --d4-ink: #2C4A3E; --none-line: #C7D2CC; --warn: #9A6B14; --warn-bg: #F7EDD8; --bad: #B4372A; --bad-bg: #F9E8E5; --rain: #3E7CB8; --band1: #1F7A5F; --band2: #3E7CB8; --band3: #9A6B14; --tip-bg: #1C2422; --tip-ink: #F5F7F6; --tip-bad: #FF9B8A; --shadow: 0 4px 16px rgba(20, 40, 33, .12); } * { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.55 "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", system-ui, sans-serif; font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } .wrap { max-width: 1240px; margin: 0 auto; padding: 22px 20px 48px; } /* --- site chrome --- */ .topbar { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 20px; border-bottom: 1px solid var(--line); } .brand { font-family: "Songti SC", "Noto Serif SC", "SimSun", serif; font-size: 17px; letter-spacing: .06em; color: var(--ink); text-decoration: none; font-weight: 700; } .brand span { color: var(--accent); font-weight: 800; } .navlinks { display: flex; gap: 14px; margin-left: auto; align-items: center; } .navlinks a { font-size: 13px; color: var(--ink2); text-decoration: none; padding: 4px 8px; border-radius: 6px; } .navlinks a:hover { background: var(--accent-soft); color: var(--accent); } .navlinks a[aria-current="page"] { color: var(--accent); font-weight: 700; background: var(--accent-soft); } .themebtn { border: 1px solid var(--line); background: var(--panel); color: var(--ink2); border-radius: 6px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: inherit; } .themebtn:hover { border-color: var(--accent); color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } header.page h1 { font-family: "Songti SC", "Noto Serif SC", "SimSun", serif; font-size: 30px; margin: 0 0 4px; letter-spacing: .04em; text-wrap: balance; } header.page .sub { color: var(--ink2); font-size: 13px; margin: 0; } header.page .sub b { color: var(--ink); font-weight: 600; } /* --- legend --- */ .legend { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; margin: 18px 0 14px; font-size: 12px; color: var(--ink2); } .legend .grp { display: flex; align-items: center; gap: 6px; } .lg-chip { display: inline-block; width: 26px; height: 14px; border-radius: 4px; } .lg-none { width: 26px; height: 14px; border-radius: 4px; border: 1.5px dashed var(--none-line); } .lg-band { display: inline-block; width: 20px; height: 4px; border-radius: 2px; } /* --- calendar --- */ .cal-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); } table.cal { border-collapse: collapse; width: 100%; } table.cal.wide { min-width: 1420px; } table.cal.narrow { min-width: 1060px; } .cal th { font-size: 12px; font-weight: 600; color: var(--ink2); letter-spacing: .18em; padding: 10px 0 8px; border-bottom: 1px solid var(--line); } .cal td { vertical-align: top; width: 14.28%; padding: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .cal td:last-child { border-right: none; } .cal tr:last-child td { border-bottom: none; } .cell { padding: 7px 8px 9px; min-height: 132px; position: relative; } .cell .dnum { font-size: 13px; font-weight: 700; margin-bottom: 5px; display: flex; align-items: center; gap: 6px; } .cell.dim .dnum, .cell.dim .noscan { color: var(--ink3); } .cell.today .dnum::after { content: "今天"; font-size: 9px; font-weight: 700; color: var(--accent); background: var(--accent-soft); border-radius: 6px; padding: 0 5px; } .noscan { font-size: 11px; } .band { position: absolute; top: 0; left: 0; right: 0; height: 3px; } .band.b1 { background: var(--band1); } .band.b2 { background: var(--band2); } .band.b3 { background: var(--band3); } .badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 8px; color: var(--bg); } .badge.b1 { background: var(--band1); } .badge.b2 { background: var(--band2); } .badge.b3 { background: var(--band3); } .rows { display: grid; gap: 2.5px; } .crow { display: grid; gap: 5px; align-items: center; } table.cal.wide .crow { grid-template-columns: 30px 50px 42px 1fr; } table.cal.narrow .crow { grid-template-columns: 30px 58px 1fr; } .crow .city { font-size: 11px; color: var(--ink2); } /* Red city = that day's cheapest regular rate is under the $30 qualifying floor, so only the bonus package makes the night count. */ .crow .city.under { color: var(--bad); font-weight: 700; } .chip { font-size: 11.5px; font-weight: 600; border-radius: 4px; padding: 1px 4px; cursor: default; white-space: nowrap; text-align: center; } .chip.d1 { background: var(--d1); color: var(--d1-ink); } .chip.d2 { background: var(--d2); color: var(--d2-ink); } .chip.d3 { background: var(--d3); color: var(--d3-ink); } .chip.d4 { background: var(--d4); color: var(--d4-ink); } .chip.none { border: 1.5px dashed var(--none-line); color: var(--ink3); font-weight: 400; } .chip:hover, .chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } .pts { font-size: 10.5px; color: var(--ink3); white-space: nowrap; } .pts .star { color: var(--warn); font-weight: 700; } .wx { font-size: 10px; color: var(--ink3); white-space: nowrap; } .wx .rain.wet { color: var(--rain); font-weight: 700; } .flag { font-size: 10px; font-weight: 700; border-radius: 4px; padding: 0 4px; } .flag.bad { color: var(--bad); background: var(--bad-bg); } .flag.warn { color: var(--warn); background: var(--warn-bg); } /* --- cards & notes --- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-top: 22px; } .card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; border-top: 3px solid var(--accent); position: relative; } .card.p1 { border-top-color: var(--band1); } .card.p2 { border-top-color: var(--band2); } .card.p3 { border-top-color: var(--band3); } .card h3 { margin: 2px 0; font-size: 15px; } .card .meta { font-size: 12px; color: var(--ink2); margin-bottom: 8px; } .card .nums { display: flex; gap: 18px; margin-bottom: 8px; flex-wrap: wrap; } .card .nums .n { font-size: 19px; font-weight: 700; } .card .nums .l { font-size: 11px; color: var(--ink2); } .card p { margin: 0; font-size: 12.5px; color: var(--ink2); } .notes { margin-top: 20px; font-size: 12px; color: var(--ink2); padding-left: 18px; } .notes li { margin-bottom: 4px; } /* --- tooltip --- */ #tip { position: fixed; z-index: 20; display: none; max-width: 280px; background: var(--tip-bg); color: var(--tip-ink); border-radius: 8px; padding: 8px 11px; font-size: 12px; line-height: 1.5; pointer-events: none; box-shadow: var(--shadow); } #tip b { font-size: 12.5px; } #tip .trow { display: flex; justify-content: space-between; gap: 14px; } #tip .tsub { opacity: .75; } #tip .bad { color: var(--tip-bad); font-weight: 700; } /* --- landing --- */ .hero { padding: 26px 0 6px; } .hero h1 { font-family: "Songti SC", "Noto Serif SC", "SimSun", serif; font-size: clamp(30px, 5vw, 44px); margin: 0 0 10px; letter-spacing: .03em; text-wrap: balance; } .hero p { font-size: 15px; color: var(--ink2); margin: 0; max-width: 60ch; } .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 26px 0 6px; } .kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 13px 15px; } .kpi .n { font-size: 24px; font-weight: 700; letter-spacing: -.01em; } .kpi .n small { font-size: 13px; font-weight: 600; color: var(--ink2); } .kpi .l { font-size: 11.5px; color: var(--ink2); margin-top: 2px; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-top: 12px; } .tile { display: block; text-decoration: none; color: inherit; background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; transition: border-color .15s, transform .15s; } .tile:hover { border-color: var(--accent); transform: translateY(-2px); } .tile h2 { margin: 0 0 6px; font-size: 18px; } .tile .eyebrow { font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .tile p { margin: 0 0 10px; font-size: 13px; color: var(--ink2); } .tile .go { font-size: 12.5px; color: var(--accent); font-weight: 600; } .sec { margin-top: 34px; } .sec h2 { font-size: 17px; margin: 0 0 4px; } .sec > p { color: var(--ink2); font-size: 13px; margin: 0 0 14px; } .rulebox { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 4px 18px; } .rulebox dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 14px 0; font-size: 13px; } .rulebox dt { color: var(--ink2); } .rulebox dd { margin: 0; } .rulebox dd b { color: var(--accent); } code { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--accent-soft); border-radius: 4px; padding: 1px 5px; color: var(--ink); } pre { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px; overflow-x: auto; margin: 0; } pre code { background: none; padding: 0; } footer.site { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink3); display: flex; gap: 14px; flex-wrap: wrap; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media (max-width: 640px) { .wrap { padding: 16px 14px 36px; } header.page h1 { font-size: 24px; } }