. motion.js keeps its outgoing snapshot on ; matching only `main > section` means that inert clone never restarts this entrance while it is leaving. */ main > section.view:not([hidden]) { animation: ipf-view-enter 120ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes ipf-view-enter { from { opacity: 0; transform: translate3d(0, 6px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { main > section.view:not([hidden]) { animation: none; } } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #3a3a3c; border-radius: 999px; border: 3px solid var(--bg); } ::-webkit-scrollbar-thumb:hover { background: #48484a; } input::placeholder, textarea::placeholder { color: rgba(235, 235, 245, 0.38); } /* native date/month controls + their picker glyphs follow the theme */ input[type="date"], input[type="month"], input[type="time"], input[type="number"] { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: 9px; color-scheme: dark; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1) opacity(0.55); } /* the date label is one unbreakable phrase: "24 Oct 鈫?27 Oct 路 3 nights" */ .dr-value, #addCityBtn { white-space: nowrap; } /* 鈹€鈹€ shell: the dynamic island 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .topbar { position: sticky; top: 10px; z-index: 120; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; width: calc(100% - 32px); max-width: 1220px; height: 56px; margin: 16px auto 0; padding: 0 16px 0 20px; border-radius: 999px; background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); /* The upward layer masks content scrolling into the gap above the pill. */ box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65), 0 -18px 24px 12px rgba(8, 9, 12, 0.92), inset 0 1px 0 rgba(255, 255, 255, 0.1); } .brand { gap: 10px; flex: none; white-space: nowrap; justify-self: start; } .brand .brand-name { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; background: linear-gradient(180deg, #ffffff, #a1a1a6); -webkit-background-clip: text; background-clip: text; color: transparent; } .navswitch { position: relative; left: auto; transform: none; flex: none; justify-self: center; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6); } .navswitch .navlink { border: 0; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; letter-spacing: 0.01em; padding: 7px 16px; border-radius: 999px; text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .navswitch .navlink:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); } .navswitch .navlink.active { background: #2c2c2e; color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 2px rgba(0, 0, 0, 0.5); } .topnav { display: flex; align-items: center; gap: 10px; flex: none; justify-self: end; } .topnav .navlink { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text-2); font-size: 12.5px; padding: 7px 14px; border-radius: 999px; } .topnav .navlink:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); } .topbar .notif-wrap, .topbar #notifBtn { display: none !important; } .nav-live { font-size: 12px; color: #a1a1a6; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.03); white-space: nowrap; flex: none; } .nav-live .dot { box-shadow: 0 0 10px var(--ok); } /* 鈹€鈹€ round-90 / round-95: header plan pill (current tier + upgrade) 鈹€鈹€鈹€鈹€鈹€鈹€ */ /* Smoked titanium glass, one quiet champagne hairline. It sits beside the primary tabs rather than competing with them: 12px, medium weight, and no filled gold. The action word carries the only bright accent. */ .plan-pill { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 6px 12px; border-radius: 999px; background: rgba(200, 162, 90, 0.08); border: 1px solid rgba(200, 162, 90, 0.28); color: #e5d3a8; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 238, 200, 0.10), 0 2px 10px rgba(0, 0, 0, 0.18); transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease); } .plan-pill:hover { background: rgba(200, 162, 90, 0.13); border-color: rgba(200, 162, 90, 0.42); color: #f1dca9; } .plan-pill:active { transform: scale(0.98); } .plan-pill-mark { font-size: 10px; line-height: 1; color: #c8a25a; opacity: 0.9; } .plan-pill-sep { color: rgba(200, 162, 90, 0.55); font-size: 11px; line-height: 1; } #planPillAction { font-size: 12px; font-weight: 600; letter-spacing: 0.01em; color: #c8a25a; } .plan-pill.is-trip { background: rgba(110, 106, 255, 0.10); border-color: rgba(110, 106, 255, 0.32); color: #d7d5ff; } .plan-pill.is-trip .plan-pill-mark, .plan-pill.is-trip #planPillAction { color: #b4b2ff; } .plan-pill.is-pro { background: rgba(200, 162, 90, 0.10); border-color: rgba(200, 162, 90, 0.38); } .plan-pill.is-pro #planPillAction { color: #e5c178; } .plan-pill.is-concierge { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); color: #f5f5f7; } .plan-pill.is-concierge .plan-pill-mark, .plan-pill.is-concierge #planPillAction { color: #e5c178; } /* 鈹€鈹€ brand mark 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .logo { /* PF brand logo (same SVG as the favicon), clipped by the rounded box */ background-color: #0b0b0b; background-image: url("/favicon.svg"); background-size: cover; background-position: center; background-repeat: no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 0 1px rgba(255, 255, 255, 0.08); } /* 鈹€鈹€ search surface + fields 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .searchglass { background: linear-gradient(180deg, rgba(28, 28, 30, 0.94), rgba(17, 17, 19, 0.94)); border-color: rgba(255, 255, 255, 0.1); box-shadow: var(--sh-md), 0 0 0 1px rgba(0, 0, 0, 0.5); } .searchglass:focus-within { border-color: rgba(255, 255, 255, 0.22); box-shadow: var(--sh-lg); } .sfield:hover { background-color: rgba(255, 255, 255, 0.05); } .chip input[type="number"], input[type="number"], input[type="month"], select { background: var(--surface-2); color: var(--text); border-color: var(--border); } .chip input[type="checkbox"] { background: #1c1c1e; border-color: var(--neutral-4); } .chip input[type="checkbox"]:checked { background: var(--accent); border-color: var(--accent); } .sep { background: var(--border); } /* panels: dropdowns, autocomplete, date popover, alerts */ .cur-panel, .ac-panel, .dr-popover, .notif-panel { background: #1f1f22; border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 64px rgba(0, 0, 0, 0.72); } .cur-item:hover, .cur-item:focus-visible, .ac-item:hover, .ac-item.sel { background: rgba(255, 255, 255, 0.07); } /* 鈹€鈹€ gradient headlines (Titanium Pro hero) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ /* Round-85 (user request): the first screen has to say WHAT this is before it asks for a city. The kicker is one quiet line above the headline, with the same live dot the top bar uses 鈥?not a new visual language, the one already on the page. */ .hero-kicker { display: none !important; align-items: center; gap: 8px; margin-bottom: 18px; padding: 5px 13px 5px 11px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: 0.11em; color: var(--text-2); background: rgba(255, 255, 255, 0.045); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); animation: rise 400ms 40ms var(--ease) both; } .hero-kicker-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--ok); box-shadow: 0 0 0 3px rgba(48, 209, 88, 0.16); animation: pulse 2.4s var(--ease) infinite; } .hero-title { font-size: clamp(2.25rem, 4.2vw, 3.5rem); background: linear-gradient(180deg, #ffffff 20%, #86868b 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation-delay: 90ms; } .hero-sub { font-size: 1.15rem; max-width: 560px; animation-delay: 150ms; } /* Round-85: one-tap destinations under the omnibar. They are a starting point, so they live with the hero and retire with it once a comparison is on screen. */ .quick-cities { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; margin: 16px auto 0; max-width: 900px; } .qc-label { font-size: 12.5px; color: var(--text-3); margin-right: 2px; } .qc-chip { font-size: 12.5px; padding: 6px 14px; } .qc-chip:active { transform: scale(0.97); } /* A phone has to fit the whole kicker on one line: at 375px the tracked sentence wrapped inside its pill and the live dot stranded on the left edge. */ @media (max-width: 600px) { .hero-kicker { font-size: 10px; letter-spacing: 0.06em; padding: 4px 11px 4px 9px; gap: 6px; } .hero-kicker-dot { width: 5px; height: 5px; box-shadow: 0 0 0 2px rgba(48, 209, 88, 0.16); } .hero-sub { font-size: 1.05rem; } } /* 鈹€鈹€ page atmosphere: photography behind Compare and Explore 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ /* Four hotel photographs rotate slowly behind the two discovery views. The scrim keeps the OLED interface the subject: the photography is texture, never content competing with the type. */ .atmosphere { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #000; opacity: 0; transition: opacity 900ms var(--ease-macos-out); } .atmosphere.on { opacity: 1; } .atmo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: brightness(0.78) saturate(0.95) contrast(1.02); transform: scale(1.05); transition: opacity 2400ms var(--ease-ios-spring); animation: atmoDrift 30s ease-in-out infinite alternate; will-change: opacity, transform; } .atmo-img.on { opacity: 1; } /* Round-77: when results are on screen the still stops drifting, so motion never competes with a number the reader is comparing. */ .atmosphere.still .atmo-img { animation-play-state: paused; } @keyframes atmoDrift { from { transform: scale(1.05) translate3d(0, 0, 0); } to { transform: scale(1.13) translate3d(-1.4%, -1.8%, 0); } } .atmo-scrim { position: absolute; inset: 0; background: radial-gradient(1150px 700px at 50% 30%, rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.62) 72%), linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.26) 34%, rgba(0, 0, 0, 0.5) 68%, #000 100%); } /* content sits above the atmosphere; the header is already above it */ main { position: relative; z-index: 1; min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px); } @media (max-width: 700px) { .atmo-img { filter: brightness(0.66) saturate(0.9) contrast(1.02); } .atmo-scrim { background: radial-gradient(700px 520px at 50% 26%, rgba(0, 0, 0, 0.16), rgba(0, 0, 0, 0.66) 74%), linear-gradient(180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.34) 32%, rgba(0, 0, 0, 0.58) 70%, #000 100%); } } @media (prefers-reduced-motion: reduce) { .atmo-img { animation: none; transition: none; } } /* 鈹€鈹€ spotlight omnibar 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .spotlight-omnibar { max-width: 860px; min-height: 72px; padding: 8px 8px 8px 24px; border-radius: 999px; background: #141416; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 60px rgba(0, 0, 0, 0.75); } .spotlight-omnibar .searchrow { align-items: center; } .omni-field { position: relative; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 0 14px; } .omni-city { flex: 1.4 1 120px; } .omni-dates { flex: 1.2 1 120px; } .omni-currency { flex: 0 0 118px; } .omni-label { font-size: 10px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: #8e8e93; margin-bottom: 1px; white-space: nowrap; } .omni-field .sfield { padding: 0; min-height: 26px; font-size: 16px; font-weight: 600; background: transparent; border-radius: 8px; width: 100%; } .omni-field .sfield-dates { display: block; text-align: left; min-width: 0; } .omni-field .sfield:hover { background: transparent; } .omni-divider { margin: 6px 0; height: 34px; align-self: center; } .omni-submit { height: 56px; padding: 0 26px; margin: 0; border-radius: 999px; font-size: 14.5px; flex: none; /* the same frosted action as .primary, lit rather than coloured */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 24px rgba(0, 0, 0, 0.45); transition: transform 220ms var(--ease-macos-out), box-shadow 220ms var(--ease-macos-out), background 220ms var(--ease-macos-out), border-color 220ms var(--ease-macos-out); } .omni-submit:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36), 0 10px 30px rgba(0, 0, 0, 0.55); } .omni-foot { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; max-width: 860px; margin: 14px auto 0; } .omni-foot:not(:has(> *:not([hidden]))) { display: none; } #addCityBtn.adding { border-color: var(--accent); color: var(--text); background: var(--accent-soft); } #searchHint { max-width: 860px; margin: 12px auto 0; } /* 鈹€鈹€ value gauge 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .value-gauge-card { max-width: 760px; margin: 40px auto 0; padding: 18px 24px; background: #141416; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 20px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .gauge-header { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .gauge-k { font-size: 14px; font-weight: 700; color: var(--text); } .gauge-form { font-size: 12.5px; color: var(--text-3); } .gauge-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 14px; } .gauge-segment { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-align: center; border: 1px solid transparent; } .g-seg-k { font-size: 12px; font-weight: 650; } .g-seg-v { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } /* Legend tiles, value numbers (.vcat) and tier badges (.vbadge) all read the same --tier--text/-bg/-border tokens, so the three always match. */ .seg-poor { background: var(--tier-poor-bg); color: var(--tier-poor-text); border-color: var(--tier-poor-border); } .seg-fair { background: var(--tier-fair-bg); color: var(--tier-fair-text); border-color: var(--tier-fair-border); } .seg-great { background: var(--tier-great-bg); color: var(--tier-great-text); border-color: var(--tier-great-border); } .seg-exceptional { background: var(--tier-exceptional-bg); color: var(--tier-exceptional-text); border-color: var(--tier-exceptional-border); box-shadow: var(--tier-exceptional-glow); } /* 鈹€鈹€ buttons 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ /* `.primary` is the theme's canonical main action; `.btn-primary` is the same treatment under the class the markup already uses. Round-71 (user request): no bright blue. The main action is frosted graphite 鈥? a translucent film of light on the same grey scale as everything else, with a hairline highlight instead of a colour. Emphasis comes from contrast and the inset light line, not from hue. */ .btn-primary, .primary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(0, 0, 0, 0.55); backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); } .btn-primary:hover, .primary:hover { background: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.12)); border-color: rgba(255, 255, 255, 0.34); } .btn-primary:active, .primary:active { transform: scale(0.985); background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)); } .btn-ghost { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.12); color: var(--text-2); } .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); color: var(--text); border-color: rgba(255, 255, 255, 0.24); } .btn-ghost.primary { background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.07)); color: var(--text); border-color: rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 1px 2px rgba(0, 0, 0, 0.55); } .calbtn { background: #f5f5f7; color: #0a0a0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); } .calbtn:hover { background: #ffffff; } .btn-watch { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); color: var(--text); } .btn-watch:hover { background: rgba(255, 255, 255, 0.1); } /* round-94: a crisp inline shield instead of the platform emoji. The SVG is decorative (aria-hidden); the button's accessible name remains its span. */ .ico-shield { width: 14px; height: 14px; flex: none; color: #c8a25a; stroke: currentColor; fill: none; } #guardHotelBtn:hover .ico-shield, #guardHotelBtn:focus-visible .ico-shield { color: #e5c178; filter: drop-shadow(0 0 6px rgba(200, 162, 90, 0.3)); } .primary:disabled, .btn-ghost.primary:disabled { opacity: 0.45; } /* pills + chips */ .pill.neutral { background: rgba(255, 255, 255, 0.08); color: var(--text-2); } .brandpill { background: rgba(255, 255, 255, 0.08); color: var(--text-2); } .d-chip { background: #1f1f22; } .d-chip.active { border-color: var(--text); } .chip { background: rgba(255, 255, 255, 0.04); border-color: var(--border); } .chip:hover { background: rgba(255, 255, 255, 0.07); } /* segmented controls 鈥?dark track, graphite thumb */ .seg { background: #121214; border-color: rgba(255, 255, 255, 0.08); } .seg-item.active { background: #3a3a3c; color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 1px 2px rgba(0, 0, 0, 0.5); } /* 鈹€鈹€ result cards: media + identity/prices + verdict, one 3-column row 鈹€鈹€鈹€鈹€ */ /* Round-92 (user request): the Compare card now matches Explore's .d-card: flush-left 3-to-5 photo carousel, the stay's two price totals (with per-night breakdown) in the middle, and a verdict column with the huge value figure, category, plain-English typical-value delta and the white-pill action. */ .cards { display: grid; grid-template-columns: 1fr; gap: 14px; } .hcard { display: grid; grid-template-columns: 268px minmax(0, 1fr) 268px; grid-template-areas: "media name value" "media pricing value" "media pricing foot"; align-items: stretch; column-gap: 0; row-gap: 0; padding: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, #191b1f 0%, #15171a 100%); border: 1px solid #2b2f36; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; } .hcard:hover { border-color: #3a3f47; background: linear-gradient(180deg, #1d2025 0%, #181a1e 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 24px rgba(0, 0, 0, 0.35); } /* The strongest value gets the same quiet gold cue as the hero. */ .hcard[data-best="true"] { border-color: rgba(200, 162, 90, 0.34); } /* styles.css still names cash/points areas for the old grid; inside the pricing zone those two names would land on the same cell and overlap. */ .hcard .c-cash, .hcard .c-points { grid-area: auto; } /* icons (inline SVG, inherit currentColor) */ .ic { width: 13px; height: 13px; flex: none; } /* The media pane is the card's left column, edge to edge. */ .hcard > .d-media { grid-area: media; min-height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; } .hcard > .d-media.dc-empty { min-height: 100%; } /* Resilience: if photo-carousel.js ever fails to load, the same slot holds the single photoThumb fallback (`c-thumb`) instead of a 96px icon in a 268px well. */ .hcard > .thumb.c-thumb, #bestValue > .thumb.c-thumb { grid-area: media; width: 100%; height: 100%; min-height: 296px; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.08); border-radius: 0; } /* Zone A 鈥?identity */ .hcard .c-name { grid-area: name; position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 24px 8px; } /* Round-98: the pin is a quiet bookmark at the card header's top-right. The identity block reserves that corner so a long hotel name never runs under it. */ .hcard .c-name .c-ident { padding-right: 42px; } .c-pin-btn { position: absolute; top: 17px; right: 18px; z-index: 3; display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(10, 12, 16, 0.55); color: #b8c2d0; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: color 150ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), border-color 150ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), background 150ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)), transform 110ms var(--ease, cubic-bezier(0.22, 1, 0.36, 1)); } .c-pin-btn:hover { color: #f5f7fa; border-color: rgba(255, 255, 255, 0.32); background: rgba(24, 27, 33, 0.78); } .c-pin-btn:active { transform: scale(0.94); } .c-pin-btn .pin-glyph { width: 15px; height: 15px; display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; } .c-pin-btn[aria-pressed="true"] { color: #f3dfb1; border-color: rgba(200, 162, 90, 0.55); background: rgba(200, 162, 90, 0.16); box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.16); } .c-pin-btn[aria-pressed="true"] .pin-glyph path { fill: currentColor; } /* A pinned card gets the same quiet gold edge as the hero 鈥?a glanceable marker, not a second competing call to action. */ .hcard[data-pinned="true"] { border-color: rgba(200, 162, 90, 0.34); } .c-ident { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .c-brand { font-size: 11.5px; font-weight: 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); } .hname { font-size: 22px; font-weight: 650; line-height: 1.18; color: var(--text); letter-spacing: -0.02em; overflow-wrap: anywhere; } .c-where { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; font-size: 12.5px; color: #9299a5; } .c-where .ic { width: 12px; height: 12px; opacity: 0.8; } .c-note { font-size: 12px; color: var(--text-3); } .c-signals { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 2px; } .c-rank { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 750; letter-spacing: 0.06em; color: var(--text-3); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } .dist-pill { display: inline-flex; align-items: center; white-space: nowrap; padding: 1px 7px; border-radius: 999px; font-size: 11px; color: var(--text-2); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } .c-signals .vbadge { margin-top: 0; padding: 2px 8px; font-size: 10.5px; font-weight: 650; color: #7fc9a3; background: rgba(48, 209, 88, 0.12); border-color: rgba(48, 209, 88, 0.28); } .c-arb-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 650; text-decoration: none; color: #e5c178; background: rgba(200, 162, 90, 0.1); border: 1px solid rgba(200, 162, 90, 0.3); } .c-arb-pill:hover { color: #f1dca9; background: rgba(200, 162, 90, 0.17); } .c-arb-pill .ic { width: 11px; height: 11px; } /* Zone B 鈥?stay totals, side by side, with the per-night reading underneath */ .hcard .c-split { grid-area: pricing; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-self: stretch; align-content: start; padding: 8px 24px 22px; } .hcard .c-cash { padding-right: 18px; } .hcard .c-points { border-left: 1px solid rgba(255, 255, 255, 0.07); padding-left: 18px; } .hcard .c-split .m-label { font-size: 12px; font-weight: 600; color: #b8c2d0; } .hcard .c-split .m-total { display: block; margin-top: 3px; font-size: 25px; font-weight: 750; line-height: 1.15; letter-spacing: -0.025em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; } /* The big points figure uses the same white token as the cash figure (compare cards, best-value answer, hotel view). Size and weight unchanged. */ .hcard .c-split .c-points .m-total, .metric.points .m-value, #bestValue .bv-total-points b, .d-num b { color: var(--text); } .hcard .c-split .m-total em { font-style: normal; font-size: 13px; font-weight: 550; color: var(--text-3); margin-right: 2px; } .hcard .c-split .m-total .u { text-decoration: none; font-size: 13px; font-weight: 550; color: var(--text-3); } .hcard .c-split .m-sub { display: block; margin-top: 3px; font-size: 12px; color: #b8c2d0; } .m-na { font-size: 14px !important; font-weight: 600 !important; color: var(--text-3) !important; } /* Zone C 鈥?the verdict, the huge value figure and the typical-value sentence */ .hcard .c-value { grid-area: value; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 22px 22px 14px; border-left: 1px solid rgba(255, 255, 255, 0.08); } .c-value-label { font-size: 12px; color: #b8c2d0; } .c-value-fig { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; } .c-value-fig .m-value { font-size: 42px; font-weight: 750; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; } .c-value-fig .m-unit { font-size: 12px; font-weight: 600; color: #b8c2d0; white-space: nowrap; } .c-value-cat { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; } .c-value-cat .vbadge { margin-top: 0; } .c-value-cat .ic { width: 12px; height: 12px; } .c-verdict-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 1px; } .c-verdict-title { font-size: 12px; font-weight: 650; letter-spacing: 0.01em; } .c-verdict-title.ok { color: #4ce076; } .c-verdict-title.cash { color: #e8c07a; } .c-verdict-title.neutral { color: var(--text-2); } .c-verdict-title.muted { color: var(--text-3); } .c-cpp-delta { font-size: 12px; line-height: 1.4; color: #b8c2d0; font-variant-numeric: tabular-nums; white-space: normal; overflow-wrap: anywhere; } /* Round-97: the effective 4th-night-free points note and the champagne-gold tier-upgrade badge. Both sit in the points column on a Compare card and in the value figure on the #bestValue hero. */ .fnf-badge, .fnf-tier-badge { display: inline-flex; align-items: center; align-self: flex-start; gap: 4px; margin-top: 5px; padding: 2px 7px; border-radius: 999px; border: 1px solid rgba(200, 162, 90, 0.26); background: rgba(200, 162, 90, 0.08); color: #d9c08a; font-size: 10.5px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.35; white-space: nowrap; } .fnf-badge + .fnf-tier-badge { margin-top: 2px; } .fnf-tier-badge { border-color: rgba(200, 162, 90, 0.55); background: rgba(200, 162, 90, 0.16); color: #f3dfb1; box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.16); } #bestValue .fnf-badge, #bestValue .fnf-tier-badge { margin-top: 2px; } /* Footer sits at the bottom of the verdict column: reason above the action. */ .hcard .c-foot { grid-area: foot; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 10px; padding: 12px 22px 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .c-foot-takeaway { margin: 0; min-width: 0; font-size: 12.5px; line-height: 1.45; color: #b8c2d0; text-wrap: pretty; } .c-act { align-self: flex-end; margin-left: 0; } .c-act .calbtn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 148px; height: 40px; padding: 0 18px; border-radius: 999px; font-size: 13.5px; font-weight: 600; } .calbtn-arrow { font-size: 13px; line-height: 1; } /* Tablet: media stays left; the verdict, value and prices stack to its right. */ @media (max-width: 1100px) { .hcard { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "media name" "media value" "media pricing" "media foot"; } .hcard .c-name { padding: 20px 22px 6px; } .hcard .c-value { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); padding: 16px 22px 12px; } .hcard .c-split { padding: 8px 22px 18px; } .hcard .c-foot { padding: 12px 22px 18px; } } /* Mobile: identity, verdict/value, prices, then action. The media leads the card; the footer is full-width at the bottom, exactly as before. */ @media (max-width: 700px) { .hcard { grid-template-columns: 1fr; grid-template-areas: "media" "name" "value" "pricing" "foot"; row-gap: 0; border-radius: 18px; } .hcard > .d-media { min-height: 216px; height: 216px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hcard > .d-media.dc-empty { min-height: 216px; } .hcard > .thumb.c-thumb { min-height: 216px; height: 216px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #bestValue > .thumb.c-thumb { min-height: 216px; height: 216px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .hcard .c-name { padding: 16px 18px 4px; } .hname { font-size: 19px; } .hcard .c-value { padding: 12px 18px; border-left: 0; border-top: 0; } .c-value-fig .m-value { font-size: 36px; } .hcard .c-split { padding: 8px 18px 16px; } /* A 375px card cannot hold "or 100k points" on one nowrap line: let the total wrap rather than widen the grid track and force horizontal page overflow. */ .hcard .c-split .m-total { font-size: 22px; white-space: normal; overflow-wrap: anywhere; } .hcard .c-foot { padding: 12px 18px 18px; } .c-act { align-self: stretch; margin-left: 0; } .c-act .calbtn { width: 100%; min-width: 0; padding: 0 16px; height: 38px; } .c-cpp-delta { white-space: normal; } } /* 鈹€鈹€ round-94: cash-only cards read as ONE quiet note 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ Without a points rate there is no value verdict to compete for attention. The points column says "or 鈥?/ Cash rate only" in a muted voice, and the verdict column collapses to a single small "Cash only" chip. The required E2E text ("CASH ONLY" pill and the footer sentence) stays in the DOM; the now-redundant title/label are visually suppressed rather than repeated. */ .hcard[data-rec="CASH_ONLY"] .c-points { border-left-color: rgba(255, 255, 255, 0.05); } .hcard[data-rec="CASH_ONLY"] .c-points .m-label { font-weight: 550; color: var(--text-3); } .hcard[data-rec="CASH_ONLY"] .c-points .m-total { margin-top: 5px; font-size: 16px; font-weight: 550; letter-spacing: 0; line-height: 1.3; color: var(--text-3); } .hcard[data-rec="CASH_ONLY"] .c-points .m-total em { font-size: 12px; color: var(--text-3); } .hcard[data-rec="CASH_ONLY"] .c-points .m-sub { margin-top: 2px; font-size: 11.5px; color: var(--text-3); } .hcard[data-rec="CASH_ONLY"] .c-value { justify-content: center; } .hcard[data-rec="CASH_ONLY"] .c-value-label, .hcard[data-rec="CASH_ONLY"] .c-verdict-head { display: none; } .hcard[data-rec="CASH_ONLY"] .c-value-fig { margin-top: 2px; gap: 0; } .hcard[data-rec="CASH_ONLY"] .c-value-fig .m-value { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.25; color: #c2cad6; background: rgba(255, 255, 255, 0.035); border: 1px dashed rgba(255, 255, 255, 0.16); } /* 鈹€鈹€ round-77 (chunk 3): My Trips hierarchy, data & maintenance 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .trip-counts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: baseline; margin: 4px 0 16px; padding: 12px 16px; border-radius: 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); } .tc-item { font-size: 12.5px; color: var(--text-2); } .tc-item b { color: var(--text); font-size: 15px; font-weight: 650; margin-right: 4px; font-variant-numeric: tabular-nums; } .tc-total { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, 0.12); } .tc-paused b { color: var(--warn); } .needs-attn { margin: 0 0 18px; padding: 14px 18px; border-radius: 16px; background: rgba(255, 159, 10, 0.07); border: 1px solid rgba(255, 159, 10, 0.3); } .needs-attn h2 { margin: 0 0 8px; font-size: 15px; letter-spacing: -0.01em; } .attn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .attn-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .attn-text { font-size: 13px; color: var(--text-2); } .attn-text b { color: var(--text); } /* A route announces itself by moving focus to its heading. A heading is not interactive, so it is announced, not boxed 鈥?same rule as the hotel title. */ .wt-title:focus, .hero-title:focus { outline: none; } /* With nothing tracked, one empty state carries both jobs 鈥?the section headers would otherwise stack three columns of nothing above it. */ #activeTrips.is-empty > .wt-sec-title, #activeTrips.is-empty > .wt-summary { display: none; } #activeTrips { margin-bottom: 24px; } #wtList, #gList, #pastList { display: flex; flex-direction: column; gap: 16px; } .past-trips, .data-maintenance { margin: 22px 0 0; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; background: rgba(255, 255, 255, 0.02); padding: 4px 18px; } .past-trips > summary, .data-maintenance > summary { cursor: pointer; padding: 12px 2px; font-size: 13.5px; font-weight: 600; color: var(--text-2); list-style: none; } .past-trips > summary::-webkit-details-marker, .data-maintenance > summary::-webkit-details-marker { display: none; } /* The native marker is hidden, so the disclosure keeps its own chevron 鈥?a collapsed section must still look like something that opens. */ .past-trips > summary::after, .data-maintenance > summary::after { content: '鈥?; display: inline-block; margin-left: 8px; color: var(--text-3); transform: rotate(90deg); transition: transform 160ms var(--ease-macos-out); } .past-trips[open] > summary::after, .data-maintenance[open] > summary::after { transform: rotate(-90deg); } .past-trips[open] > summary, .data-maintenance[open] > summary { color: var(--text); } .past-trips .impact { margin: 6px 0 14px; } .past-trips #pastList .wt-card { opacity: 0.92; } .data-maintenance .data-ops { padding: 2px 0 14px; border-top: 1px solid rgba(255, 255, 255, 0.07); margin-top: 4px; } .data-row { margin-top: 10px; } /* 鈹€鈹€ round-79: the daily collection's progress bar 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ /* Real stored work, not elapsed time: the fill is the share of today's plan already in the warehouse (running) or of the forward window (idle). Graphite, like every other action in the app 鈥?a bar is state, not a promotion. */ .collect-progress { margin: 10px 0 2px; } .cp-top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; } .cp-pct { font-size: 18px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .cp-phase { font-size: 12.5px; color: var(--text-2); } .cp-track { position: relative; height: 8px; border-radius: 999px; overflow: hidden; background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.09); } .cp-fill { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.88)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: width 400ms var(--ease-macos-out); } .cp-track[data-state="idle"] .cp-fill { background: linear-gradient(90deg, rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.44)); box-shadow: none; } .cp-detail { margin: 6px 0 0; } @media (max-width: 460px) { .cp-pct { font-size: 16px; } .cp-phase { font-size: 12px; } } /* A night tile is an observation, not a booking: say where the rate is actually confirmed, right under the grid it applies to. */ .cal-guide { margin: 14px 2px 0; font-size: 12px; line-height: 1.5; color: var(--text-3); } @media (max-width: 700px) { .trip-counts { gap: 6px 14px; } .tc-total { padding-left: 0; border-left: 0; } /* The workspace title owns the first line; its two jobs sit under it, left aligned with the title and the lists rather than floating right. */ .watches-head { align-items: flex-start; row-gap: 12px; } .wt-head-actions { width: 100%; justify-content: flex-start; } /* The exact-stay answer and best windows lead on a phone: the peak card precedes the month grid inside the bento. */ .hotel-bento .peak-card { order: -1; } } @media (max-width: 460px) { /* Two wrapped pills read worse than one clear column at phone width. */ .wt-empty-actions { flex-direction: column; align-items: center; gap: 10px; } .wt-empty-actions .btn-primary, .wt-empty-actions .btn-ghost { width: 100%; max-width: 280px; } } /* Round-93: the single primary action in the trip header is a gold pill, so it cannot be mistaken for the secondary "Compare my dates" ghost button. */ #gAddBtn { background: #c8a25a; border-color: rgba(200, 162, 90, 0.6); color: #0b0c10; font-weight: 600; } #gAddBtn:hover { background: #d6b36d; border-color: rgba(200, 162, 90, 0.85); color: #0b0c10; } /* Round-77: routine view transitions are shorter and unblurred, so a numeric answer never appears as a blurred previous screen. The durations themselves live once, in motion.css. */ /* When results exist the big hero retires: the answer and the hotels become the page's priority, while the destination/dates/currency stay editable in the omnibar (desktop) or behind Edit (phones). */ #searchView.has-results .hero { display: none; } #searchView.has-results .searchhint { display: none; } #searchView.has-results .searchglass { margin-top: 8px; } /* 鈹€鈹€ round-76 (chunk 2): result hierarchy, teaching, compact trip 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .tripsum { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 860px; margin: 6px auto 14px; padding: 12px 14px 12px 18px; border-radius: 16px; background: #141416; border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .tripsum-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .tripsum-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .tripsum-sub { font-size: 12.5px; color: var(--text-2); } .tripsum-edit { flex: none; height: 34px; padding: 0 16px; } /* The exact-stay answer above the list. */ .bestvalue { margin: 18px 0 4px; padding: 18px 22px 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022)); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 12px 32px rgba(0, 0, 0, 0.35); } .bv-top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .bv-kicker { font-size: 12.5px; font-weight: 650; color: var(--text-2); letter-spacing: 0.01em; } .bv-body { display: grid; grid-template-columns: minmax(0, 1.5fr) auto auto auto; gap: 14px 24px; align-items: center; margin-top: 10px; } .bv-who { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .bv-name { margin: 0; font-size: 20px; font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; overflow-wrap: anywhere; } .bv-where { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); } .bv-fig { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; } .bv-value { font-size: 27px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .bv-unit { font-size: 11.5px; color: var(--text-3); } .bv-totals { display: flex; gap: 20px; flex-wrap: wrap; } .bv-total { display: flex; flex-direction: column; gap: 2px; } .bv-total b { font-size: 15px; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; } .bv-total i { font-style: normal; font-size: 11.5px; color: var(--text-3); } /* Secondary labels over the translucent/painted card surfaces: #b8c2d0 is >= 7.2:1 on graphite, so a label never dissolves into the atmosphere photo. */ .hcard .m-label, .hcard .c-value-label, .bv-unit, .bv-total i { color: #b8c2d0; } .bv-cta { min-width: 120px; height: 42px; padding: 0 20px; flex: none; } .bv-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); max-width: 88ch; } .bv-empty { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; flex-wrap: wrap; } .bv-empty-title { margin: 0 0 4px; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; } .bv-empty .bv-note { margin: 0; } /* Round-92 (user request): the winner is a flagship 3-column card 鈥?flush-left photo carousel, the stay's identity + totals, then the recommendation/value/ action column, with a quiet gold accent on the frame. */ #bestValue.bv-card-3col { display: grid; grid-template-columns: 268px minmax(0, 1fr) 268px; grid-template-areas: "media top side" "media body side" "media note side"; gap: 0; padding: 0; overflow: hidden; border: 1px solid rgba(200, 162, 90, 0.38); background: linear-gradient(180deg, #191714 0%, #141416 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), 0 14px 36px rgba(0, 0, 0, 0.4); } #bestValue.bv-card-3col > .d-media { grid-area: media; min-height: 100%; border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 0; } #bestValue.bv-card-3col > .d-media.dc-empty { min-height: 100%; } #bestValue.bv-card-3col .bv-top { grid-area: top; padding: 20px 22px 0; } #bestValue.bv-card-3col .bv-body { grid-area: body; display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin: 0; padding: 6px 22px 20px; } #bestValue.bv-card-3col .bv-name { font-size: 24px; letter-spacing: -0.022em; } #bestValue.bv-card-3col .bv-totals { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); gap: 12px 22px; margin-top: 2px; } #bestValue.bv-card-3col .bv-total { min-width: 0; } #bestValue.bv-card-3col .bv-total-label { font-size: 11.5px; color: var(--text-2); } #bestValue.bv-card-3col .bv-total b { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } #bestValue.bv-card-3col .bv-total-kind { font-size: 10px; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-3); } #bestValue.bv-card-3col .bv-side { grid-area: side; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 20px; border-left: 1px solid rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.022); } #bestValue.bv-card-3col .bv-fig { gap: 4px; } #bestValue.bv-card-3col .bv-value { font-size: 42px; font-weight: 750; line-height: 1; letter-spacing: -0.04em; } #bestValue.bv-card-3col .bv-unit { font-size: 12px; color: #b8c2d0; } #bestValue.bv-card-3col .bv-fig .vbadge { margin-top: 2px; } #bestValue.bv-card-3col .bv-fig .c-cpp-delta { margin-top: 2px; } #bestValue.bv-card-3col .bv-cta { width: 100%; min-width: 0; margin-top: auto; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.5); background: #f5f5f7; color: #0a0a0c; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 2px 6px rgba(0, 0, 0, 0.4); font-size: 14px; font-weight: 650; } #bestValue.bv-card-3col .bv-cta:hover { background: #ffffff; } .bv-go-arrow { font-size: 13px; line-height: 1; } .bv-ihg { font-size: 12px; color: var(--text-2); text-align: center; text-decoration: none; } .bv-ihg:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } #bestValue.bv-card-3col .bv-note { grid-area: note; margin: 0; padding: 0 22px 18px; max-width: none; } /* teaching: one short line, arithmetic + thresholds behind a disclosure */ .valueinfo { display: flex; flex-direction: column; gap: 4px; margin-top: 14px; } .teach-line { font-size: 13px; line-height: 1.55; color: var(--text-2); } .teach-line b { color: var(--text); font-weight: 650; } .teach-how { margin-top: 2px; } .teach-how summary { cursor: pointer; width: max-content; font-size: 12.5px; color: var(--text-3); } .teach-how summary:hover { color: var(--text-2); } .teach-how p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-2); max-width: 74ch; } /* the per-city best is actionable without repeating the big answer panel */ .city-go { border: 0; background: none; padding: 0; margin-left: 2px; font: inherit; color: var(--text); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(255, 255, 255, 0.3); } .city-go:hover { color: var(--accent-blue); } .empty-note button { margin-left: 10px; } @media (max-width: 1100px) { #bestValue.bv-card-3col { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "media top" "media body" "media side" "note note"; } #bestValue.bv-card-3col > .d-media { min-height: 100%; } #bestValue.bv-card-3col .bv-side { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } #bestValue.bv-card-3col .bv-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } #bestValue.bv-card-3col .bv-cta { margin-top: 2px; } } @media (max-width: 720px) { /* The fields live behind Edit while results are shown (their values are kept in the same inputs, so Edit never resets the query). */ #searchView.has-results:not(.editing) .searchglass { display: none; } #searchView.has-results:not(.editing) .hero { display: none; } .bestvalue { margin-top: 12px; padding: 16px; border-radius: 18px; } #bestValue.bv-card-3col { grid-template-columns: 1fr; grid-template-areas: "media" "top" "body" "side" "note"; padding: 0; border-radius: 18px; } #bestValue.bv-card-3col > .d-media { min-height: 216px; height: 216px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } #bestValue.bv-card-3col > .d-media.dc-empty { min-height: 216px; } #bestValue.bv-card-3col .bv-top { padding: 16px 18px 0; } #bestValue.bv-card-3col .bv-body { padding: 4px 18px 16px; } #bestValue.bv-card-3col .bv-side { padding: 16px 18px 18px; } #bestValue.bv-card-3col .bv-name { font-size: 20px; } #bestValue.bv-card-3col .bv-value { font-size: 34px; } #bestValue.bv-card-3col .bv-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } #bestValue.bv-card-3col .bv-total b { font-size: 18px; white-space: normal; overflow-wrap: anywhere; } #bestValue.bv-card-3col .bv-note { padding: 0 18px 16px; } .bv-body { grid-template-columns: 1fr; gap: 12px; } .bv-cta { grid-column: 1; grid-row: auto; justify-self: stretch; width: 100%; } .bv-totals { gap: 16px; } .bv-name { font-size: 18px; } .bv-value { font-size: 24px; } .tripsum { margin: 4px auto 12px; } .teach-how summary { font-size: 12px; } } /* sort: the app's own popover, so the options carry the theme */ /* Round-85 (user request): the results header owns its own layer. The sort popover opens directly over the verdict's "View stay" button (#bvGo), so the header is a stacking context (35) and the panel sits at 60 inside it 鈥?the options are always painted above the card they float over, never behind its button. */ .resultmeta { position: relative; z-index: 35; margin-bottom: 10px; } .sort-wrap { flex: none; } .sort-btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px 0 16px; border-radius: 999px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); font-size: 13px; font-weight: 600; } .sort-btn:hover { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.2); } .sort-wrap .cur-panel { left: auto; right: 0; min-width: 232px; z-index: 60; } /* value tiers 鈥?badge, inline figure, calendar bar */ .vbadge.LOW { color: var(--tier-poor-text); background: var(--tier-poor-bg); border-color: var(--tier-poor-border); } .vbadge.NORMAL { color: var(--tier-fair-text); background: var(--tier-fair-bg); border-color: var(--tier-fair-border); } .vbadge.HIGH { color: var(--tier-great-text); background: var(--tier-great-bg); border-color: var(--tier-great-border); } .vbadge.EXTREMELY_HIGH { color: var(--tier-exceptional-text); background: var(--tier-exceptional-bg); border-color: var(--tier-exceptional-border); box-shadow: var(--tier-exceptional-glow); } .vcat.LOW { color: var(--tier-poor-text); } .vcat.NORMAL { color: var(--tier-fair-text); } .vcat.HIGH { color: var(--tier-great-text); } .vcat.EXTREMELY_HIGH { color: var(--tier-exceptional-text); } /* `data-value-tier` 鈥?the view-facing name of the same four tiers, so the calendar and the result cards can glow without knowing category codes. */ [data-value-tier="poor"] { --tier: var(--v-low); --tier-bd: var(--v-low-bd); --tier-glow: rgba(142, 142, 147, 0); } [data-value-tier="fair"] { --tier: var(--v-normal); --tier-bd: var(--v-normal-bd); --tier-glow: rgba(100, 210, 255, 0.2); } [data-value-tier="great"] { --tier: var(--v-high); --tier-bd: var(--v-high-bd); --tier-glow: rgba(41, 151, 255, 0.28); } [data-value-tier="exceptional"] { --tier: var(--v-extreme); --tier-bd: var(--v-extreme-bd); --tier-glow: rgba(255, 214, 10, 0.3); } /* Result cards deliberately carry NO tier outline: the classification under the valuation is the only colour signal on the card (neutral outline, brighter on hover). Calendar cells keep their ring 鈥?that grid is a heat map. */ /* 鈹€鈹€ hotel calendar 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .calendar-card { background: var(--cal-bg); border-color: rgba(255, 255, 255, 0.08); } .day { background: #1c1c1e; border-color: var(--cal-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .day:hover { border-color: rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 8px 24px rgba(0, 0, 0, 0.6); } .day[data-ihg]:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 2px var(--accent-soft), 0 8px 24px rgba(0, 0, 0, 0.6); } .day.closed { background: #141416; opacity: 0.4; } .day.empty { background: transparent; border-color: transparent; } /* the tier shows as a frame + dot over the numbers. Round-81: the frame is two pixels of the tier colour (the old 1px inner ring read as a smudge), and the dot belongs to every mode 鈥?the label chips are gone. */ .day[data-value-tier] { box-shadow: inset 0 0 0 2px var(--tier), inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 0 20px -10px var(--tier-glow); } .day[data-value-tier]:hover { box-shadow: inset 0 0 0 2px var(--tier), inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 0 24px -8px var(--tier-glow), 0 8px 24px rgba(0, 0, 0, 0.6); } .day.today { outline-color: var(--accent); } .day.sk-day { background: linear-gradient(90deg, #1a1a1c 25%, #232326 45%, #1a1a1c 65%); } /* Cold-month calendar: open nights with no quote yet while live rates refresh. */ .cal-cell-refreshing { background: linear-gradient(100deg, #1b1b1e 24%, #2a2a2e 42%, #1b1b1e 60%); background-size: 220% 100%; border-color: rgba(200, 162, 90, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); animation: cal-cell-shimmer 2.4s ease-in-out infinite; } @keyframes cal-cell-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { .cal-cell-refreshing { animation: none; background: #1f1f22; } } .sk-card { background: #1a1a1c; border-color: rgba(255, 255, 255, 0.08); } .dow { color: var(--text-3); } /* Round-81: the price lenses shade grey-to-black (black = cheapest night), so the legend bar follows the cells instead of promising a blue that no longer exists. */ .gradbar-grey { background: linear-gradient(90deg, #363639, #0a0a0b); border-color: var(--cal-border); } /* 鈹€鈹€ insights / stats / stays 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .insight { border-color: rgba(255, 255, 255, 0.09); } .insight.highlight { border-color: var(--v-extreme-bd); box-shadow: 0 0 24px -10px rgba(255, 214, 10, 0.5); } .stays { background: #141416; border-color: rgba(255, 255, 255, 0.08); } .stay { border-color: rgba(255, 255, 255, 0.08); } /* 鈹€鈹€ monitoring strip + background programmes 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .monstrip { background: linear-gradient(180deg, #1b1b1e 0%, #151517 100%); border-color: rgba(255, 255, 255, 0.09); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); margin-top: 24px; margin-bottom: 20px; padding: 14px 18px; border-radius: 18px; } .mon-note code { background: rgba(255, 255, 255, 0.08); } .recovery { background: #1a1a1c; border-color: rgba(255, 255, 255, 0.09); } /* 鈹€鈹€ My Trips: the impact strip (existing #impact, now a dashboard row) 鈹€鈹€ */ .impact { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 16px; } .impact-item { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px; border-radius: var(--r-lg); border: 1px solid rgba(255, 255, 255, 0.1); background: linear-gradient(180deg, #202023 0%, #17171a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.13), 0 1px 2px rgba(0, 0, 0, 0.6); } .impact-item .k { font-size: 12px; font-weight: 600; color: var(--text-3); } .impact-item .v { font-size: clamp(34px, 3.4vw, 44px); line-height: 1.05; font-weight: 700; letter-spacing: -0.04em; margin: 0; font-variant-numeric: tabular-nums; } .impact-item .u { font-size: 12px; color: var(--text-2); margin: 0; } .impact-item:nth-child(1) .v { color: var(--ok); } .impact-item:nth-child(2) .v { color: #e5b8ff; } .impact-item:nth-child(3) .v { color: var(--accent-blue); } /* 鈹€鈹€ sheets, dialogs, toast 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .sheet-backdrop { background: rgba(0, 0, 0, 0.66); } .sheet { background: #1c1c1e; border-color: rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 30px 80px rgba(0, 0, 0, 0.8); } .toast { background: #2c2c2e; color: var(--text); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 48px rgba(0, 0, 0, 0.7); } .notif-browser[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; } /* Round-93: the enable control and its permission explanation stack, never sharing one cramped line. */ .notif-panel .notif-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; } .notif-panel .notif-empty p { margin: 0; } .notif-goto-trips { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12.5px; font-weight: 600; color: #c8a25a; text-decoration: none; } .notif-goto-trips:hover { color: #f1dca9; text-decoration: underline; text-underline-offset: 3px; } .notif-goto-trips:focus-visible { outline: 2px solid rgba(200, 162, 90, 0.65); outline-offset: 2px; border-radius: 4px; } /* legacy components that used --text as a dark surface: in this theme --text is near-white, which left white-on-white. */ /* Round-72 (user request): the unread count is the same frosted graphite as the primary action 鈥?a translucent film with a hairline, not a blue dot. */ .notif-badge { background: rgba(255, 255, 255, 0.16); color: var(--text); border: 1px solid rgba(255, 255, 255, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); } .h-tip { background: #f4f5f7; color: #0b0c0e; } /* 鈹€鈹€ value history 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .history-sec { border-color: rgba(255, 255, 255, 0.09); } /* High-contrast mode curves: value cyan, points violet, cash champagne gold. The SVG root carries h-mode-* so the dots and the area stops follow the line. */ .h-line { stroke: #38bdf8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 6px rgba(56, 189, 248, 0.35)); } .h-mode-value { stroke: #38bdf8; } .h-mode-points { stroke: #c084fc; } .h-mode-cash { stroke: #f5c451; } /* The mode class also rides the SVG root for dot/gradient hooks; reset the inherited stroke there so axis text never picks up a coloured outline. */ .h-svg { stroke: none; } .h-area { stroke: none; } .h-grad-top { stop-color: #38bdf8; } .h-grad-bot { stop-color: #38bdf8; } .h-dot { fill: #13161d; stroke: #38bdf8; stroke-width: 2; } .h-dot.cur { fill: #38bdf8; stroke: #ffffff; stroke-width: 2; } .h-svg.h-mode-points .h-line { stroke: #c084fc; filter: drop-shadow(0 2px 6px rgba(192, 132, 252, 0.4)); } .h-svg.h-mode-points .h-grad-top, .h-svg.h-mode-points .h-grad-bot { stop-color: #c084fc; } .h-svg.h-mode-points .h-dot { stroke: #c084fc; } .h-svg.h-mode-points .h-dot.cur { fill: #c084fc; stroke: #ffffff; } .h-svg.h-mode-cash .h-line { stroke: #f5c451; filter: drop-shadow(0 2px 6px rgba(245, 196, 81, 0.4)); } .h-svg.h-mode-cash .h-grad-top, .h-svg.h-mode-cash .h-grad-bot { stop-color: #f5c451; } .h-svg.h-mode-cash .h-dot { stroke: #f5c451; } .h-svg.h-mode-cash .h-dot.cur { fill: #f5c451; stroke: #ffffff; } /* chart axes (round-72): tick labels and the two axis captions */ .h-ax { fill: #9ba5b5; font-size: 11px; font-variant-numeric: tabular-nums; } .h-ax-title { fill: #c2cad6; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .hist-legend .sw { border: 1px solid rgba(255, 255, 255, 0.14); } .notes-list .notes-warn::before { background: var(--warn); } /* 鈹€鈹€ explore: control deck, filter strip, opportunity cards 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ /* Round-81: the visible month control is the app's own picker (24 months, two year groups). The native input stays in the DOM as the value contract but is never shown: it was slow to drive and listed years nobody needs. */ .omni-month { flex: 0 0 210px; } .d-month-native { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; } .d-glass .d-month { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: transparent; border: 0; padding: 0; text-align: left; font-size: 16px; font-weight: 600; color: var(--text); cursor: pointer; } .d-glass .d-month:hover { color: #fff; } .d-glass .month-value { white-space: nowrap; } .month-panel { min-width: 272px; max-width: calc(100vw - 32px); max-height: min(70vh, 460px); overflow-y: auto; padding: 12px; } .month-year + .month-year { margin-top: 12px; } .month-year-label { display: block; margin: 0 0 6px 2px; font-size: 10.5px; font-weight: 650; letter-spacing: 0.08em; color: var(--text-3); } .month-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .month-item { height: 34px; border-radius: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-2); font-size: 12.5px; font-weight: 600; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); } .month-item:hover, .month-item:focus-visible { background: rgba(255, 255, 255, 0.12); color: var(--text); border-color: rgba(255, 255, 255, 0.2); } .month-item.active { background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1)); border-color: rgba(255, 255, 255, 0.3); color: var(--text); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24); } .stepper { display: flex; align-items: center; gap: 8px; } .omni-stay { align-items: flex-start; } .stepper-btn { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.1); background: #2c2c2e; color: var(--text); font-size: 15px; line-height: 1; display: grid; place-items: center; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14); } .stepper-btn:hover { background: #3a3a3c; } .stepper-value { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 14px; text-align: center; } .stepper .wf-unit { font-size: 12px; color: var(--text-3); } .filter-strip { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; max-width: 860px; margin: 20px auto 0; } .d-chips { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; margin: 0; } /* Round-93: quick continents sit above the finer filter chips. */ .d-region-chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0; } .d-region-chip { padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: #e5c178; background: rgba(200, 162, 90, 0.08); border-color: rgba(200, 162, 90, 0.28); } .d-region-chip:hover { color: #f1dca9; background: rgba(200, 162, 90, 0.16); border-color: rgba(200, 162, 90, 0.48); } .d-region-chip.active { color: #0b0c10; background: #c8a25a; border-color: #c8a25a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28); } .d-clear-filters { color: var(--text-3); background: transparent; border-style: dashed; border-color: rgba(255, 255, 255, 0.2); } .d-clear-filters:hover { color: var(--text); border-color: rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.05); } .d-chip { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 999px; padding: 8px 16px; font-size: 13px; } .d-chip:hover { background: rgba(255, 255, 255, 0.09); } .d-chip.active { background: #2c2c2e; color: var(--text); border-color: rgba(255, 255, 255, 0.24); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } /* the details is a BLOCK, not a flex column: Chromium wraps the open content in ::details-content, so a flex parent shrank the filter row to its content */ .d-advanced { width: 100%; display: block; } .d-advanced summary { display: block; width: max-content; margin: 0 auto; list-style: none; cursor: pointer; padding: 8px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); color: var(--text-2); font-size: 13px; font-weight: 600; } .d-advanced summary::-webkit-details-marker { display: none; } .d-advanced summary:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); } .d-advanced[open] summary { margin-bottom: 12px; background: rgba(255, 255, 255, 0.1); color: var(--text); } .d-advanced .d-adv-grid { width: 100%; } /* When opened, the filters are ONE horizontal row of real fields 鈥?not a narrow stacked column. Three fields now (the weekend constraint moved to the chip strip), so they share the row evenly. Only the smallest screens fold. */ .d-advanced .d-adv-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; } .d-advanced .d-select { height: 46px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: var(--text); font-size: 14px; font-weight: 550; } .d-advanced .d-select:hover { background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.22); } /* the brand control carries a set, so it may need two lines on a phone */ .d-advanced .d-select .d-select-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @media (max-width: 900px) { .d-advanced .d-adv-grid { grid-template-columns: 1fr 1fr; } .d-advanced .d-field:last-child { grid-column: 1 / -1; } } /* 鈹€鈹€ opportunity row (round-84, user request) 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ The hotel's own photos lead the card: up to five, swipeable, with a counter, dots and the caption the hotel itself wrote. Then the stay's two numbers, and the verdict panel. ONE card per row, so the photograph can be the size of a photograph. */ #dResults { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 22px; max-width: 1040px; } .d-card { display: grid; grid-template-columns: 300px minmax(0, 1fr) 252px; grid-template-areas: "media body side"; padding: 0; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, #171719 0%, #141416 100%); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.6); } .d-card[data-value-tier="exceptional"] { border-color: rgba(255, 214, 10, 0.28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 28px -14px rgba(255, 214, 10, 0.5); } /* the photo pane */ .d-media { grid-area: media; position: relative; overflow: hidden; min-height: 296px; background: #0b0b0d; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .d-media::after { content: ''; position: absolute; inset: auto 0 0 0; height: 58%; z-index: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.68) 100%); pointer-events: none; } .dc-track { display: flex; height: 100%; transition: transform 0.34s cubic-bezier(0.22, 0.7, 0.2, 1); } .dc-slide { flex: 0 0 100%; position: relative; margin: 0; } .dc-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .dc-arrow { position: absolute; top: 50%; z-index: 2; margin-top: -17px; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; cursor: pointer; color: #fff; background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0.82; transition: opacity 0.16s ease, background 0.16s ease; } .dc-arrow:hover { opacity: 1; background: rgba(0, 0, 0, 0.64); } .dc-arrow::before { content: ''; width: 8px; height: 8px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; } .dc-prev { left: 12px; } .dc-prev::before { transform: rotate(45deg) translate(1px, -1px); } .dc-next { right: 12px; } .dc-next::before { transform: rotate(225deg) translate(1px, -1px); } .dc-count { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; color: #fff; font-variant-numeric: tabular-nums; background: rgba(0, 0, 0, 0.5); border: 1px solid rgba(255, 255, 255, 0.12); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dc-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; display: flex; justify-content: center; gap: 5px; } .dc-dots i { width: 5px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.38); transition: width 0.2s ease, background 0.2s ease; } .dc-dots i.on { width: 15px; background: #fff; } .dc-caption { position: absolute; left: 14px; right: 14px; bottom: 28px; z-index: 2; font-size: 12px; font-weight: 550; color: #fff; line-height: 1.3; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75); } /* Brand-badged fallback: when IHG returns no photo the pane still carries the hotel's identity 鈥?a tier-tinted architectural field, the brand pill, its collection tier and a quiet monogram. 285/288 Europe cards land here. */ .dc-empty { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; min-height: 296px; padding: 16px 18px; background: radial-gradient(130% 110% at 15% 10%, #1e2433 0%, #11141c 65%, #0b0d12 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .dc-empty.dc-tier-luxury { background: radial-gradient(130% 115% at 15% 0%, rgba(200, 162, 90, 0.24) 0%, #17151c 58%, #0d0e13 100%); } .dc-empty.dc-tier-upscale { background: radial-gradient(130% 115% at 15% 0%, rgba(56, 139, 253, 0.22) 0%, #131824 58%, #0c0f16 100%); } .dc-empty.dc-tier-essential { background: radial-gradient(130% 115% at 15% 0%, rgba(163, 177, 198, 0.15) 0%, #15171c 58%, #0c0d11 100%); } .dc-fallback-grid { position: absolute; inset: 0; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; } .dc-fallback-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; flex-wrap: wrap; } .dc-fallback-brand { display: inline-flex; align-items: center; max-width: 100%; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: 0.04em; line-height: 1.2; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f5f7fa; background: rgba(10, 12, 18, 0.72); border: 1px solid rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .dc-empty.dc-tier-luxury .dc-fallback-brand { border-color: rgba(200, 162, 90, 0.45); color: #f3d999; } .dc-empty.dc-tier-upscale .dc-fallback-brand { border-color: rgba(56, 189, 248, 0.4); color: #d6ecff; } .dc-fallback-tier { font-size: 10.5px; font-weight: 500; color: #b8c2d0; letter-spacing: 0.02em; } .dc-fallback-monogram { position: absolute; right: 14px; bottom: -8px; z-index: 0; font-size: 72px; font-weight: 800; letter-spacing: -0.05em; line-height: 1; color: rgba(255, 255, 255, 0.055); user-select: none; pointer-events: none; } /* the facts */ .d-body { grid-area: body; display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; min-width: 0; } .d-brand { font-size: 11.5px; font-weight: 650; letter-spacing: 0.09em; color: var(--text-3); } .d-body .wt-hotel { margin: 0; font-size: 23px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.15; } /* Round-93: the hotel name is a second, larger calendar affordance. */ #dResults .d-card .d-body .wt-hotel { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; transition: color 160ms var(--ease), text-decoration-color 160ms var(--ease); } #dResults .d-card .d-body .wt-hotel:hover, #dResults .d-card .d-body .wt-hotel:focus-visible { color: #c8a25a; text-decoration-color: rgba(200, 162, 90, 0.7); } #dResults .d-card .d-media { cursor: pointer; } .d-where { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--text-2); } .d-where .ic { flex: none; } .d-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 4px; } .d-num { display: grid; gap: 3px; min-width: 0; } .d-num-label { font-size: 12px; color: var(--text-2); } .d-num b { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; } .d-num b em { font-style: normal; font-size: 13px; font-weight: 550; color: var(--text-3); margin-right: 2px; } .d-num b u { text-decoration: none; font-size: 13px; font-weight: 550; color: var(--text-3); } .d-num i { font-style: normal; font-size: 12px; color: var(--text-3); } .d-window { margin: 0; font-size: 12px; color: var(--text-3); } .d-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: auto; } .d-meta-pill { font-size: 11.5px; color: var(--text-2); background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.08); padding: 3px 9px; border-radius: 999px; } /* the verdict */ .d-side { grid-area: side; display: flex; flex-direction: column; align-items: stretch; gap: 8px; padding: 24px 20px; border-left: 1px solid rgba(255, 255, 255, 0.08); } .d-rec { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-2); } .d-rec.ok { color: var(--ok); } .d-rec .ic { flex: none; } .d-value { display: flex; align-items: baseline; gap: 4px; } .d-hero-val { font-size: 34px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; background: linear-gradient(180deg, #fff, #a1a1a6); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; } .d-hero-unit { font-size: 12px; font-weight: 600; color: var(--text-3); } .d-side .vbadge { align-self: flex-start; } .d-cta { margin-top: auto; padding: 11px 16px; width: 100%; border: 0; border-radius: 999px; cursor: pointer; background: #f5f5f7; color: #0b0b0d; font-family: inherit; font-size: 14px; font-weight: 600; transition: background 0.16s ease, transform 0.16s ease; } .d-cta:hover { background: #fff; transform: translateY(-1px); } /* Round-93: pagination keeps a continent scan responsive without hiding the remaining opportunities 鈥?the count is explicit and the button is one tap. */ .d-more-wrap { grid-column: 1 / -1; display: flex; justify-content: center; padding: 6px 0 18px; } .d-more-btn { padding: 11px 22px; font-size: 13px; } .d-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 10px; } .d-link { background: none; border: 0; padding: 0; font: inherit; font-size: 12.5px; color: var(--text-2); text-decoration: none; cursor: pointer; } .d-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 2px; } .d-link.d-arb { color: #e5c178; font-size: 11.5px; font-weight: 600; line-height: 1.4; padding: 4px 8px; border-radius: 7px; background: rgba(200, 162, 90, 0.09); border: 1px solid rgba(200, 162, 90, 0.28); } .d-link.d-arb:hover { color: #f1dca9; text-decoration: none; background: rgba(200, 162, 90, 0.15); } @media (max-width: 1000px) { .d-card { grid-template-columns: 260px minmax(0, 1fr); grid-template-areas: "media body" "media side"; } .d-side { border-left: 1px solid rgba(255, 255, 255, 0.08); border-top: 1px solid rgba(255, 255, 255, 0.08); } } /* honest empty state 鈥?frosted card with a live radar ring */ .wt-empty.d-empty { max-width: 520px; margin: 40px auto 0; padding: 48px 32px; text-align: center; border-radius: 28px; background: rgba(24, 24, 27, 0.72); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 24px 64px rgba(0, 0, 0, 0.6); } .wt-empty.d-empty h2 { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; } /* Round-93: a compact inline empty state for the "Upcoming and active stays" section when bookings (or history) exist but no unbooked stay does. */ .wt-empty.wt-sub-empty { margin: 14px 0 18px; padding: 16px 20px; text-align: left; border: 1px dashed rgba(255, 255, 255, 0.14); border-radius: 16px; background: rgba(255, 255, 255, 0.025); } .wt-empty.wt-sub-empty p { margin: 0; max-width: none; font-size: 13px; line-height: 1.5; color: var(--text-3); } .wt-empty.wt-sub-empty strong { color: var(--text-2); font-weight: 600; } .d-empty .radar { width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 50%; border: 1px solid rgba(41, 151, 255, 0.35); position: relative; display: grid; place-items: center; box-shadow: 0 0 40px -10px rgba(191, 90, 242, 0.45); } .d-empty .radar::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.14); } .d-empty .radar::after { content: ""; position: absolute; inset: 24px; border-radius: 50%; background: radial-gradient(circle, rgba(41, 151, 255, 0.8), rgba(191, 90, 242, 0.25) 60%, transparent 70%); } .d-empty .radar span { position: absolute; inset: 0; border-radius: 50%; border-top: 2px solid rgba(41, 151, 255, 0.9); animation: radarSpin 2.6s linear infinite; } @keyframes radarSpin { to { transform: rotate(360deg); } } .d-empty-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px; } .d-empty-actions .btn-ghost { background: #2c2c2e; border-color: rgba(255, 255, 255, 0.12); color: var(--text); border-radius: 999px; } /* 鈹€鈹€ hotel detail: 12-column bento 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .hotelbar { position: sticky; top: var(--topbar-offset, 80px); z-index: 40; margin-bottom: 12px; padding: 12px 18px; border-radius: 20px; gap: 12px; background: rgba(20, 20, 22, 0.86); backdrop-filter: blur(18px) saturate(1.6); -webkit-backdrop-filter: blur(18px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 30px rgba(0, 0, 0, 0.45); } /* Reserve the async containers so the gallery and stay strip cannot push the calendar down when their content lands (zero-CLS hotel detail). */ #hotelHero { min-height: 90px; } #staySummary { min-height: 96px; } /* Round-87 (user request): the decision strip directly under the hotel header. Four cells 鈥?nightly cash, nightly points, the 鈧?10k verdict and the booking action 鈥?so the whole decision is readable without scrolling. A three-cell variant covers the two states that have no exact stay (a search quote, and the typical month when no dates are selected). */ #hotelView .stay-summary { margin: 4px 0 8px; padding: 9px 16px; border-radius: 18px; } .stay-rate-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 8px; } .stay-rate-strip.srs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .srs-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); } .srs-label { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-3); } .srs-val { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srs-unit { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: 0; } .srs-na { font-size: 14px; font-weight: 600; color: var(--text-3); letter-spacing: 0; } .srs-sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; font-size: 12px; color: var(--text-2); } .srs-action .stay-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; margin: 3px 0 4px; padding: 0 16px; border-radius: 999px; border: 1px solid transparent; background: #f5f5f7; color: #0a0a0c; font-size: 13px; font-weight: 650; text-decoration: none; transition: background 0.16s ease; } .srs-action .stay-link:hover, .srs-action .stay-link:focus-visible { background: #fff; } /* Round-87: the strip is the first thing on the page 鈥?it collapses before it ever overflows, two cells at a time on a tablet and one on a phone. */ @media (max-width: 900px) { .stay-rate-strip, .stay-rate-strip.srs-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .stay-rate-strip, .stay-rate-strip.srs-3 { grid-template-columns: minmax(0, 1fr); } .srs-val { font-size: 19px; } } /* 鈹€鈹€ round-94: cash-only stay dates get one quiet notice 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ The points/verdict cells remain in the DOM (their text is part of the honest answer and the suites still find .srs-cell), but they are visually collapsed so the bookable cash rate leads. One dashed pill explains the whole state. */ .stay-summary-grid--cash-only { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stay-summary-grid--cash-only .srs-cell--muted { display: none; } .stay-summary-grid--cash-only .srs-cell:first-child { background: rgba(200, 162, 90, 0.035); border-color: rgba(200, 162, 90, 0.18); } .srs-cashonly-note { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 10px; font-size: 12px; line-height: 1.4; color: var(--text-2); background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.12); } .srs-cashonly-note::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #c8a25a; box-shadow: 0 0 0 3px rgba(200, 162, 90, 0.1); } @media (max-width: 520px) { .stay-summary-grid--cash-only { grid-template-columns: minmax(0, 1fr); } } .hoteltitle { font-size: clamp(24px, 2.4vw, 32px); } .back { border-radius: 999px; } #hotelView { padding-top: 24px; } #backBtn, #hotelView .back { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; margin-bottom: 16px; margin-left: 0; padding: 8px 16px; border-radius: 999px; scroll-margin-top: 92px; } .hotel-bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin-top: 20px; align-items: start; } .hotel-bento .calendar-card { grid-column: span 8; border-radius: 28px; padding: 28px; } .peak-card { grid-column: span 4; position: sticky; /* clear the sticky hotel bar 鈥?its height is measured into --hotelbar-h */ top: calc(var(--topbar-offset, 80px) + var(--hotelbar-h, 92px) + 12px); z-index: 20; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 28px; background: linear-gradient(180deg, #1a1a1d 0%, #141416 100%); border: 1px solid rgba(255, 255, 255, 0.12); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 20px 50px rgba(0, 0, 0, 0.5); } .peak-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .peak-hero { font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #ffffff, #a1a1a6); -webkit-background-clip: text; background-clip: text; color: transparent; } .peak-unit { font-size: 14px; font-weight: 600; color: var(--text-3); margin-left: 4px; letter-spacing: 0; -webkit-text-fill-color: var(--text-3); } .peak-window { font-size: 14px; color: var(--text-2); } .peak-nums { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 14px; border-radius: 14px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.06); } .peak-nums b { display: block; font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; } .peak-nums i { font-style: normal; font-size: 10.5px; color: var(--text-3); } .peak-cta { width: 100%; height: 48px; border-radius: 14px; margin-top: auto; } .peak-note { font-size: 11.5px; color: var(--text-3); } /* calendar cells: 92px tiles, day top-left, tier dot top-right */ .calendar { gap: 8px; min-height: 520px; } .day { height: 92px; aspect-ratio: auto; border-radius: 16px; } .day .num { font-size: 12px; color: var(--text-2); } .day[data-value-tier]::before { content: ""; position: absolute; top: 10px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--tier); box-shadow: 0 0 9px var(--tier); } /* history: one full-width card, title left, range + metric right */ .history-sec { /* Round-73: one column. The old two-column grid put the title in a narrow lane beside the controls, which is what made the header read as clutter. */ display: block; margin-top: 24px; padding: 28px 30px 30px; border-radius: 28px; background: #141416; border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } .history-sec .h-head { display: flex; align-items: center; justify-content: space-between; gap: 14px 20px; flex-wrap: wrap; margin: 0; } .history-sec .wt-title { font-size: clamp(24px, 2.2vw, 30px); white-space: nowrap; } .history-sec .h-view { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .history-sec .h-view .seg { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); } .history-sec .h-stay { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 16px 0 20px; } .history-sec .h-stay .wf-input { height: 40px; } .history-sec .h-stay .h-load { height: 40px; padding: 0 14px; } .history-sec #hBody { margin-top: 0; } /* the four figures under the graph: label above its value, one aligned row */ .history-sec .h-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 14px; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; overflow: hidden; background: rgba(255, 255, 255, 0.02); } .history-sec .h-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px 18px 16px; border-right: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; } .history-sec .h-stat:last-child { border-right: 0; } .history-sec .h-stat .k { font-size: 11.5px; font-weight: 550; color: var(--text-3); letter-spacing: 0.01em; } .history-sec .h-stat .v { font-size: 19px; font-weight: 650; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 0; /* the flex gap owns the spacing (base styles also add 4px) */ } .history-sec .h-stat .s { font-size: 12px; color: var(--text-2); } /* 鈹€鈹€ my trips: the wallet dashboard 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .wt-sec-title { font-size: 24px; letter-spacing: -0.02em; } /* watch + booking passes: hotel and window left, the live figure centre, state right, actions on their own rule. Scoped to the three lists so the Explore cards (also .wt-card) keep their own flex layout; past trips are the same card MOVED, so they must keep the same presentation (round-77). */ #wtList .wt-card, #gList .wt-card, #pastList .wt-card { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto; grid-template-areas: "main best side" "actions actions actions"; gap: 14px 20px; padding: 20px 22px; border-radius: 22px; background: rgba(24, 24, 27, 0.7); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 1px 2px rgba(0, 0, 0, 0.5); } .wt-main { grid-area: main; grid-column: 1; grid-row: 1; } .wt-best { grid-area: best; grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 16px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.06); } .wt-side { grid-area: side; grid-column: 3; grid-row: 1; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; } .wt-actions { grid-area: actions; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.06); } #gList .wt-card[data-kind="guardian"] .wt-best, #pastList .wt-card[data-kind="guardian"] .wt-best { position: relative; border: 0; padding: 0; background: transparent; } #gList .wt-card[data-kind="guardian"] .wt-best::before, #gList .wt-card[data-kind="guardian"] .wt-best::after, #pastList .wt-card[data-kind="guardian"] .wt-best::before, #pastList .wt-card[data-kind="guardian"] .wt-best::after { content: none; display: none; } .wt-best-metric.save { align-self: flex-start; padding: 3px 9px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); font-weight: 650; box-shadow: 0 0 18px -6px rgba(48, 209, 88, 0.45); } .mon-actions .btn-ghost { white-space: nowrap; } /* 鈹€鈹€ sheets: iOS inset-grouped dialogs 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ .sheet { width: min(480px, calc(100vw - 32px)); border-radius: 28px; background: rgba(28, 28, 30, 0.92); backdrop-filter: blur(26px) saturate(1.6); -webkit-backdrop-filter: blur(26px) saturate(1.6); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 40px 100px rgba(0, 0, 0, 0.8); z-index: 211; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; } .sheet-backdrop { background: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); z-index: 210; } .sheet, .sheet select, .wf-select { color-scheme: dark; } .sheet select option, .wf-select option, .sheet-body .wf-select option { background-color: #14161b; color: #f5f7fa; } .sheet-inner { padding: 22px 24px 18px; gap: 12px; } .sheet-body { gap: 0; background: #141416; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; overflow: hidden; } .sheet-body > .wf-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 52px; padding: 10px 16px; margin: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .sheet-body > .wf-row:last-child { border-bottom: 0; } .sheet-body > .wf-row > .wf-label, .sheet-body > .wf-row > .wf-value { flex: 0 1 auto; font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--text-primary); white-space: nowrap; } .sheet-body > .wf-row > .wf-value { color: var(--text-secondary); text-align: right; } /* Wave 21 / Prompt 83: optional alert-delivery contacts wrap below their label on narrow sheets and keep the address left-aligned (addresses are read, not right-aligned numbers). */ .sheet-body > .wf-contact-row { flex-wrap: wrap; row-gap: 8px; } .sheet-body > .wf-contact-row > .wf-input { flex: 1 1 240px; min-width: 0; width: auto; text-align: left; } .sheet-body .wf-dates { justify-content: flex-end; flex-wrap: nowrap; gap: 4px; } .sheet-body .wf-input, .sheet-body .wf-select { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 10px; padding: 7px 11px; color: #f5f7fa; font-weight: 600; text-align: right; height: 40px; min-height: 40px; box-sizing: border-box; color-scheme: dark; } .sheet-body .wf-input:focus, .sheet-body .wf-select:focus, .sheet-body .wf-input:focus-visible, .sheet-body .wf-select:focus-visible { outline: none; border-color: #c8a25a; box-shadow: 0 0 0 3px rgba(200, 162, 90, 0.16); color: #fff; } .sheet-body input.wf-input[type="date"] { width: 132px; min-width: 0; font-size: 13.5px; } /* Round-93: the city + hotel picker is a full-width stack; two controls on one narrow line clipped both the city prompt and the hotel names. */ .sheet-body .wf-hotel-pick { display: flex; flex-direction: column; gap: 8px; width: 100%; } .sheet-body .wf-hotel-pick .wf-input { width: 100%; text-align: left; } .sheet-body .wf-hotel-pick .wf-select { width: 100%; text-align: left; } .sheet-body .wf-hotel-pick .wf-input, .sheet-body .wf-hotel-pick .wf-select { flex: 0 0 auto; height: 40px; min-height: 40px; max-height: 40px; width: 100%; box-sizing: border-box; } #gfHotelPickerRow { flex-direction: column; align-items: stretch; gap: 8px; } #gfHotelPickerRow > .wf-label { flex: none; } #gfPointsRow { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 12px; } #gfBookedPtsLabel { white-space: normal; flex: 1 1 auto; min-width: 0; } #gfBookedPts { min-width: 150px; width: 160px; flex: 0 0 160px; text-align: right; font-variant-numeric: tabular-nums; } .wf-row select, .sheet-body .wf-select, #wfCurrency, #wfCategory, #wfVerdict, #gfCurrency, #gfHotelSel, .sheet select { text-align: center !important; text-align-last: center !important; padding-left: 28px; padding-right: 28px; } .wf-row select option, .sheet-body .wf-select option, #wfCurrency option, #wfCategory option, #wfVerdict option, #gfCurrency option, #gfHotelSel option, .sheet select option { text-align: center !important; } .sheet-body .wf-advanced, .sheet-body .wf-adv, details.wf-adv { border-top: 1px solid rgba(255, 255, 255, 0.06); padding: 0 16px; } .sheet-body .wf-advanced summary, .sheet-body .wf-adv summary, .wf-adv summary { padding: 13px 0; font-size: 14.5px; font-weight: 600; color: var(--text-primary, #f5f5f7); cursor: pointer; } .sheet-body .wf-advanced .wf-adv-grid, .wf-adv-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding-bottom: 16px; align-items: stretch; } .sheet-body .wf-advanced .wf-field, .wf-adv-grid .wf-field, .wf-adv-grid label, .wf-adv-grid label > span { display: flex; flex-direction: column; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--text-primary, #f3f4f6); } .sheet-body .wf-advanced .wf-dates, .wf-adv-grid .wf-dates { display: flex; align-items: center; justify-content: flex-start; gap: 8px; width: 100%; } #gfDeadline { width: 100%; min-width: 0; text-align: left; } #gfMinSavings { flex: 1 1 auto; min-width: 0; width: auto; text-align: left; } .sheet-body .wf-advanced .wf-input, .wf-adv-grid input, .wf-adv-grid .wf-input { height: 42px; min-height: 42px; font-size: 14.5px; font-weight: 500; color: #f5f5f7; text-align: left; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 10px; padding: 8px 12px; } .sheet-body .wf-advanced .wf-input::placeholder, .wf-adv-grid input::placeholder, .wf-adv-grid .wf-input::placeholder { color: rgba(245, 245, 247, 0.52); font-weight: 400; } .sheet-body .wf-advanced .wf-unit, .wf-adv-grid .wf-unit { font-size: 13.5px; font-weight: 500; color: var(--text-secondary, #c7c9d1); } /* recovery panel: one-click city choices for a "that's a country" answer */ .rec-choices { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; } .rec-choices-k { font-size: 12.5px; color: var(--text-3); } .rec-city { padding: 7px 16px; border-radius: 999px; font-size: 13px; font-weight: 650; background: #f4f5f7; border: 1px solid transparent; color: #111214; } .rec-city:hover { background: #ffffff; } /* 鈹€鈹€ responsive 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ @media (max-width: 760px) { .topbar { top: 10px; height: auto; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 10px 14px; border-radius: 26px; } .navswitch { /* relative, not static: the sliding pill is absolutely positioned inside it, and a static parent let it stretch across the whole header */ position: relative; left: auto; transform: none; order: 3; width: 100%; justify-content: center; } .navswitch .navlink { padding: 7px 14px; font-size: 12.5px; } .topnav { gap: 8px; } .topnav .navlink { padding: 6px 10px; font-size: 12px; } .spotlight-omnibar { border-radius: 28px; padding: 14px 14px 10px; min-height: 0; } .spotlight-omnibar .searchrow { flex-wrap: wrap; gap: 2px; } .omni-field { flex: 1 1 100%; padding: 6px 4px; } .omni-divider { display: none; } .omni-field .sfield { font-size: 17px; } .omni-submit { width: 100%; height: 50px; margin-top: 8px; } .value-gauge-card { margin-top: 28px; padding: 16px; border-radius: 18px; } .gauge-track { grid-template-columns: repeat(2, 1fr); } #dResults { grid-template-columns: 1fr; gap: 14px; } .d-card { grid-template-columns: 1fr; grid-template-areas: "media" "body" "side"; border-radius: 24px; } .d-media, .dc-empty { min-height: 216px; } .d-body { padding: 18px 18px 4px; gap: 10px; } .d-body .wt-hotel { font-size: 20px; } .d-nums { gap: 16px; } .d-num b { font-size: 21px; } .d-side { padding: 16px 18px 18px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .d-cta { margin-top: 4px; } .d-hero-val { font-size: 30px; } .wt-empty.d-empty { padding: 36px 22px; margin-top: 28px; border-radius: 24px; } .d-empty .radar { width: 60px; height: 60px; } .hotel-bento { grid-template-columns: 1fr; gap: 14px; } .hotel-bento .calendar-card { grid-column: span 1; padding: 16px; border-radius: 22px; } .peak-card { grid-column: span 1; position: static; padding: 20px; border-radius: 22px; } .hotelbar { top: 76px; padding: 10px 14px; border-radius: 16px; } .peak-hero { font-size: 36px; } .history-sec { padding: 18px; border-radius: 22px; } .history-sec .h-view { margin-left: 0; } .history-sec .h-stay { margin: 12px 0 16px; } /* One figure per row on a phone: half-width cells truncated "3 observations" to "3 observati鈥?, and the stacked label/value reads cleanly at this size. */ .history-sec .h-stats { grid-template-columns: minmax(0, 1fr); } .history-sec .h-stat { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .history-sec .h-stat:nth-child(odd) { border-right: 0; } .history-sec .h-stat:last-child { border-bottom: 0; } #wtList .wt-card, #gList .wt-card, #pastList .wt-card { grid-template-columns: 1fr; grid-template-areas: "main" "best" "side" "actions"; padding: 16px; border-radius: 20px; } #wtList .wt-main, #wtList .wt-best, #wtList .wt-side, #gList .wt-main, #gList .wt-best, #gList .wt-side, #pastList .wt-main, #pastList .wt-best, #pastList .wt-side { grid-column: 1; } .wt-main { grid-row: 1; } .wt-best { grid-row: 2; } .wt-side { grid-row: 3; align-items: flex-start; text-align: left; } .wt-actions { grid-row: 4; justify-content: flex-start; } } @media (max-width: 640px) { .impact { grid-template-columns: 1fr; gap: 10px; } .bento { padding: 14px 16px; } .bento-v { font-size: 26px; } } /* 鈹€鈹€ round-82: hotel thumbnails 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ */ /* One photo per hotel, cropped by hotel-photo.js at 2脳 the CSS box. Sizes are CSS (not inline) so a phone shrinks the same markup; the placeholder is a graphite tile with the brand's initial 鈥?honest when IHG returned no photo. */ .thumb { flex: none; display: block; object-fit: cover; border-radius: 14px; background: #1c1c1e; border: 1px solid rgba(255, 255, 255, 0.08); } .thumb-ph { display: grid; place-items: center; color: var(--text-3); font-size: 22px; font-weight: 650; letter-spacing: -0.02em; background: linear-gradient(180deg, #232326, #171719); } .thumb.c-thumb { width: 96px; height: 96px; } .thumb.d-thumb { width: 104px; height: 76px; border-radius: 12px; } .thumb.wt-thumb { width: 64px; height: 64px; border-radius: 12px; } .thumb.hero-thumb { width: 136px; height: 90px; border-radius: 16px; } /* Compare: the identity is its own vertical stack; the photograph now lives in the card's flush-left media column, not inside this block. */ .c-name { flex-direction: column; align-items: flex-start; gap: 6px; } .c-ident { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* My Trips: the photo sits beside the trip identity, not above it. */ .wt-main { display: flex; gap: 14px; align-items: flex-start; } .wt-ident { display: flex; flex-direction: column; min-width: 0; } /* Hotel header: the photo rides beside the title. */ /* Round-87 (user request): the gallery thumbs sit BESIDE the heading instead of under it, which lifts the decision strip into the first screen (a phone wraps them back underneath, where they belong). */ .hotelbar-head { display: flex; flex-direction: row; align-items: center; gap: 18px; min-width: 0; flex-wrap: wrap; } .hotelbar-main { display: flex; gap: 18px; align-items: flex-start; flex: 1 1 380px; min-width: 0; } .hotel-gallery { flex: 0 1 auto; min-width: 0; max-width: 100%; } .herostrip { flex: 0 1 auto; } .hotelhero { flex: none; } /* round-94 鈥?the hero photo is a control. A quiet corner badge says it opens the full gallery; the whole frame is clickable and keyboard-reachable. */ .hotel-hero-frame { position: relative; cursor: zoom-in; border-radius: 16px; isolation: isolate; } .hotel-hero-frame img { cursor: zoom-in; } .hotel-hero-frame:focus-visible { outline: 2px solid rgba(200, 162, 90, 0.8); outline-offset: 3px; } .hero-expand { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 8px; color: #f5f5f7; pointer-events: none; background: rgba(8, 9, 12, 0.72); border: 1px solid rgba(255, 255, 255, 0.24); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease; } .hero-expand-ic { width: 13px; height: 13px; } .hotel-hero-frame:hover .hero-expand, .hotel-hero-frame:focus-visible .hero-expand { color: #c8a25a; background: rgba(8, 9, 12, 0.86); border-color: rgba(200, 162, 90, 0.55); } /* round-83 鈥?the hotel's own photos, under the header. Up to five; the frame marks the one on show and picking another swaps the hero. Hidden when the hotel's page listed no gallery, so a hotel never shows a strip of invented pictures. */ .herostrip { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; } .herostrip::-webkit-scrollbar { height: 0; } .strip-thumb { flex: none; padding: 0; line-height: 0; cursor: pointer; background: none; border: 2px solid var(--border); border-radius: 12px; opacity: 0.62; transition: opacity 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .strip-thumb:hover { opacity: 1; border-color: var(--border-strong); transform: translateY(-1px); } .strip-thumb[aria-current='true'], .strip-thumb.active { opacity: 1; border-color: rgba(235, 235, 245, 0.5); } .strip-thumb .thumb { width: 72px; height: 50px; border-radius: 9px; border: none; } .strip-thumb .thumb-ph { font-size: 16px; } @media (max-width: 700px) { .thumb.c-thumb { width: 72px; height: 72px; border-radius: 12px; } .thumb.hero-thumb { width: 104px; height: 80px; border-radius: 14px; } .thumb.wt-thumb { width: 52px; height: 52px; } .c-name { gap: 12px; } .hotelbar-main { gap: 12px; } .hotelbar-head { gap: 10px; } .strip-thumb .thumb { width: 62px; height: 44px; border-radius: 8px; } } /* 鈹€鈹€ round-94: hotel photo lightbox 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ The hero's full-size view. Obsidian glass, graphite controls and the same champagne-gold accent as the rest of the Titanium surfaces. The image is the only bright element; all chrome stays out of its way. */ body.lb-open { overflow: hidden; } .lb-backdrop { position: fixed; inset: 0; z-index: 150; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15); } .lb-modal { position: fixed; inset: 0; z-index: 151; display: flex; align-items: center; justify-content: center; padding: 28px; } .lb-modal[hidden], .lb-backdrop[hidden] { display: none !important; } .lb-shell { width: min(1180px, 100%); max-height: calc(100vh - 56px); max-height: calc(100dvh - 56px); display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; color: #f5f5f7; background: radial-gradient(780px 340px at 20% 0%, rgba(200, 162, 90, 0.1), transparent 62%), linear-gradient(180deg, #17191d 0%, #0e0f12 100%); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 34px 100px rgba(0, 0, 0, 0.82); } .lb-head { display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .lb-kicker { margin-right: auto; font-size: 11.5px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: #c8a25a; } .lb-counter { font-size: 12px; font-weight: 600; color: var(--text-3); font-variant-numeric: tabular-nums; } .lb-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--text-2); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); transition: color 0.16s ease, background 0.16s ease, border-color 0.16s ease; } .lb-close svg { width: 15px; height: 15px; } .lb-close:hover, .lb-close:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.28); } .lb-close:focus-visible, .lb-prev:focus-visible, .lb-next:focus-visible { outline: 2px solid rgba(200, 162, 90, 0.8); outline-offset: 2px; } .lb-stage { display: grid; grid-template-columns: 48px minmax(0, 1fr) 48px; align-items: center; gap: 8px; min-height: 0; padding: 14px 16px 18px; } .lb-figure { margin: 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; } .lb-img { display: block; max-width: 100%; width: auto; height: auto; max-height: calc(100vh - 220px); max-height: calc(100dvh - 220px); object-fit: contain; border-radius: 16px; background: #08090c; } .lb-caption { min-height: 18px; max-width: 78ch; margin: 10px 6px 0; font-size: 13px; line-height: 1.45; color: var(--text-2); text-align: center; text-wrap: pretty; } .lb-prev, .lb-next { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; cursor: pointer; color: var(--text); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); transition: background 0.16s ease, border-color 0.16s ease, transform 0.16s ease; } .lb-prev svg, .lb-next svg { width: 22px; height: 22px; } .lb-prev:hover, .lb-next:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255, 255, 255, 0.3); } .lb-prev:active, .lb-next:active { transform: scale(0.94); } @media (max-width: 700px) { .lb-modal { padding: 10px; } .lb-shell { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px); border-radius: 18px; } .lb-head { padding: 10px 10px 10px 14px; gap: 8px; } .lb-stage { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 4px; padding: 8px; } .lb-prev, .lb-next { width: 36px; height: 36px; } .lb-prev svg, .lb-next svg { width: 19px; height: 19px; } .lb-img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); border-radius: 12px; } .lb-caption { margin-top: 8px; font-size: 12.5px; } } @media (prefers-reduced-motion: reduce) { .day[data-value-tier]::after { transition: none; } .hero-expand, .lb-close, .lb-prev, .lb-next { transition: none; } } /* 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 round-90 鈥?Titanium Pro pricing / contextual upgrade modal Obsidian canvas (#08090c), graphite cards (#13161d), champagne gold (#c8a25a), electric indigo for the Trip Pass. Scoped to the modal so the app's existing palette is untouched. 鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲鈺愨晲 */ body.pricing-open { overflow: hidden; } .pm-backdrop { position: fixed; inset: 0; z-index: 250; background: rgba(0, 0, 0, 0.76); backdrop-filter: blur(12px) saturate(120%); -webkit-backdrop-filter: blur(12px) saturate(120%); } .pm-modal { position: fixed; inset: 0; z-index: 251; display: flex; justify-content: center; align-items: flex-start; padding: 38px 20px 46px; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; pointer-events: auto; } .pm-modal[hidden], .pm-backdrop[hidden] { display: none !important; } .pm-shell { pointer-events: auto; width: 100%; max-width: 1180px; position: relative; padding: 30px 32px 28px; border-radius: 26px; color: #f5f5f7; background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); background-image: radial-gradient(900px 420px at 16% 0%, rgba(200, 162, 90, 0.12), transparent 64%), radial-gradient(760px 400px at 88% 6%, rgba(110, 106, 255, 0.10), transparent 64%), linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 100px rgba(0, 0, 0, 0.82), 0 0 0 1px rgba(200, 162, 90, 0.1); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif; } .pm-shell::before { content: ''; position: absolute; top: 0; left: 10%; right: 10%; height: 1px; background: linear-gradient(90deg, transparent, rgba(200, 162, 90, 0.7), rgba(110, 106, 255, 0.6), transparent); pointer-events: none; } /* #/pricing is the same luxury instrument as the contextual modal, with a slightly warmer room behind it. Both keep the exact smoked-glass surface. */ body.pricing-route .pm-backdrop { background: radial-gradient(760px 420px at 50% 0%, rgba(200, 162, 90, 0.10), transparent 68%), rgba(0, 0, 0, 0.82); } body.pricing-route .pm-shell { border-color: rgba(255, 255, 255, 0.10); } .pm-close { position: absolute; top: 16px; right: 16px; z-index: 3; width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.06); color: #c2cad6; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 14px; cursor: pointer; transition: background 0.15s ease, color 0.15s ease; } .pm-close:hover { background: rgba(255, 255, 255, 0.13); color: #fff; } .pm-context { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding: 18px 20px; margin-bottom: 22px; border-radius: 18px; background: linear-gradient(135deg, rgba(200, 162, 90, 0.10) 0%, rgba(19, 22, 29, 0.96) 54%, rgba(110, 106, 255, 0.10) 100%); border: 1px solid rgba(200, 162, 90, 0.32); } .pm-context-main { max-width: 760px; min-width: 0; } .pm-kicker { display: inline-flex; align-items: center; gap: 8px; font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 10.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: #e5c178; margin-bottom: 7px; } .pm-headline { font-size: clamp(1.2rem, 2vw, 1.6rem); line-height: 1.22; font-weight: 800; letter-spacing: -0.025em; color: #fff; margin-bottom: 7px; } .pm-sub { font-size: 13px; line-height: 1.55; color: #a1a1aa; margin-bottom: 11px; } .pm-proof { display: inline-flex; align-items: flex-start; gap: 8px; flex-wrap: wrap; padding: 6px 11px; border-radius: 9px; background: rgba(48, 209, 88, 0.09); border: 1px solid rgba(48, 209, 88, 0.26); font-size: 11.5px; line-height: 1.45; color: #a7f3c0; } .pm-context-controls { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex: none; } .pm-billing { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: #080a0e; border: 1px solid rgba(255, 255, 255, 0.14); } .pm-billing-btn { appearance: none; border: 0; background: transparent; color: #a1a1aa; padding: 7px 13px; border-radius: 999px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit; font-size: 11.5px; font-weight: 700; white-space: nowrap; transition: background 0.15s ease, color 0.15s ease; } .pm-billing-btn.active { background: linear-gradient(180deg, #262a36, #181b24); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 2px 8px rgba(0, 0, 0, 0.4); } .pm-save { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 9px; font-weight: 750; padding: 2px 6px; border-radius: 999px; color: #e5c178; background: rgba(200, 162, 90, 0.14); border: 1px solid rgba(200, 162, 90, 0.4); } .pm-demo { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.12); } .pm-demo-label { padding: 0 7px; font-family: ui-monospace, Consolas, monospace; font-size: 8.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: #8f8f98; } .pm-demo button { appearance: none; border: 0; background: transparent; color: #a1a1aa; padding: 5px 9px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 10.5px; font-weight: 700; } .pm-demo button:hover { color: #fff; background: rgba(255, 255, 255, 0.06); } .pm-demo button.active { background: rgba(200, 162, 90, 0.16); color: #e5c178; box-shadow: inset 0 0 0 1px rgba(200, 162, 90, 0.42); } .pm-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; } .pm-tier { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 20px 20px 18px; border-radius: 18px; background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .pm-tier.ipf-tier-card { isolation: isolate; } .pm-tier.trip-pass { background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); background-image: radial-gradient(120% 90% at 50% 0%, rgba(110, 106, 255, 0.10), transparent 62%), linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); border-color: rgba(110, 106, 255, 0.32); } .pm-tier.titanium-pro { border: 1px solid rgba(200, 162, 90, 0.48); border-color: rgba(200, 162, 90, 0.48); background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); background-image: radial-gradient(100% 74% at 50% 0%, rgba(200, 162, 90, 0.17), transparent 60%), linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); box-shadow: inset 0 1px 0 rgba(229, 193, 120, 0.30), 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(200, 162, 90, 0.12); } .pm-tier.titanium-pro::before { content: ''; position: absolute; top: -1px; left: 12%; right: 12%; height: 1px; border-radius: 999px; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(229, 193, 120, 0.92), transparent); box-shadow: 0 0 22px 2px rgba(200, 162, 90, 0.28); } .pm-tier.current { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 255, 255, 0.28); } .pm-tier.titanium-pro.current { box-shadow: inset 0 1px 0 rgba(229, 193, 120, 0.4), 0 0 0 1px rgba(200, 162, 90, 0.62), 0 18px 44px rgba(0, 0, 0, 0.55), 0 0 30px rgba(200, 162, 90, 0.16); } .pm-tier-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .pm-tier-name { font-size: 16px; font-weight: 750; letter-spacing: -0.01em; color: #fff; } .pm-tier-tag { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 9px; font-weight: 750; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; color: #a1a1aa; background: rgba(255, 255, 255, 0.055); border: 1px solid rgba(255, 255, 255, 0.1); } .pm-tier-tag.gold { color: #e5c178; background: rgba(200, 162, 90, 0.13); border-color: rgba(200, 162, 90, 0.38); } .pm-tier-tag.indigo { color: #b4b2ff; background: rgba(110, 106, 255, 0.13); border-color: rgba(110, 106, 255, 0.38); } .pm-price-line { display: flex; align-items: baseline; gap: 6px; } .pm-price { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 32px; font-weight: 750; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; } .pm-price-unit { font-size: 12.5px; font-weight: 550; color: #a1a1aa; } .pm-price-sub { min-height: 17px; margin-top: 3px; font-size: 11px; color: #8f8f98; } .pm-tier-desc { margin: 10px 0 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 12px; line-height: 1.5; color: #a1a1aa; } .pm-features { list-style: none; display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; padding: 0; } .pm-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.45; color: #e4e4e7; } .pm-features li.dim { color: #8f8f98; } .pm-features strong { font-weight: 700; color: inherit; } .pm-fi { flex: none; width: 12px; font-family: ui-monospace, Consolas, monospace; font-size: 11px; font-weight: 750; line-height: 1.5; } .pm-fi.ok { color: #30d158; } .pm-fi.gold { color: #e5c178; } .pm-fi.indigo { color: #9c99ff; } .pm-fi.lock { color: #8f8f98; } .pm-cta { width: 100%; appearance: none; border-radius: 12px; padding: 11px 14px; font-family: inherit; font-size: 12.5px; font-weight: 750; line-height: 1.25; cursor: pointer; text-align: center; transition: filter 0.15s ease, background 0.15s ease; } .pm-cta.ghost { background: rgba(255, 255, 255, 0.05); color: #c2cad6; border: 1px solid rgba(255, 255, 255, 0.14); } .pm-cta.ghost:hover { background: rgba(255, 255, 255, 0.1); color: #fff; } .pm-cta.indigo { background: linear-gradient(180deg, #7c78ff 0%, #5853ec 100%); color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28), 0 8px 20px rgba(88, 83, 236, 0.35); } .pm-cta.gold { background: linear-gradient(180deg, #dfc07c 0%, #b88d40 100%); color: #090a0d; border: 1px solid rgba(255, 255, 255, 0.35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 10px 26px rgba(200, 162, 90, 0.36); } .pm-cta:hover { filter: brightness(1.07); } .pm-foot-note { min-height: 14px; margin-top: 8px; font-size: 10.5px; line-height: 1.4; color: #8f8f98; text-align: center; } /* subtle footer tier */ /* The Concierge Desk stays in the DOM for legacy hooks but is not sold. */ .pm-concierge, #pricingConciergeCard, .p-concierge-strip, [data-plan=concierge_desk], [data-plan=concierge_syndicate], [data-tier=CONCIERGE] { display: none !important; } .pm-concierge { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding: 13px 18px; border-radius: 15px; background: rgba(255, 255, 255, 0.028); border: 1px solid rgba(255, 255, 255, 0.1); } .pm-concierge-main { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; min-width: 0; } .pm-concierge-kicker { font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: #8f8f98; } .pm-concierge-title { font-size: 13px; font-weight: 750; color: #e5c178; } .pm-concierge-sub { font-size: 11.5px; color: #a1a1aa; } .pm-concierge-cta { width: auto; flex: none; padding: 8px 14px; font-size: 11.5px; } /* calculator */ .pm-calc { display: grid; grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr); gap: 20px; margin-top: 16px; padding: 19px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(20, 22, 28, 0.94), rgba(12, 14, 18, 0.98)); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .pm-calc-copy { min-width: 0; } .pm-calc-kicker { font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 9.5px; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: #e5c178; margin-bottom: 4px; } .pm-calc-title { font-size: 15px; font-weight: 750; color: #fff; margin-bottom: 7px; } .pm-payback-lead { margin: 0 0 12px; padding: 8px 11px; border-radius: 9px; font-size: 11.5px; line-height: 1.5; color: #f1dca9; background: rgba(200, 162, 90, 0.09); border: 1px solid rgba(200, 162, 90, 0.28); } .pm-calc-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .pm-field { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 9px 11px; border-radius: 11px; background: #0b0d12; border: 1px solid rgba(255, 255, 255, 0.08); } .pm-field.full { grid-column: 1 / -1; } .pm-field-label { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 10.5px; font-weight: 650; color: #a1a1aa; } .pm-field-label b { font-family: ui-monospace, Consolas, monospace; font-size: 10.5px; color: #e5c178; font-weight: 700; } .pm-select { width: 100%; appearance: none; border-radius: 8px; padding: 7px 9px; background: #13161d; color: #fff; border: 1px solid rgba(255, 255, 255, 0.16); font-family: inherit; font-size: 11.5px; font-weight: 600; } .pm-slider { width: 100%; accent-color: #c8a25a; cursor: pointer; } .pm-scale { display: flex; align-items: center; justify-content: space-between; font-family: ui-monospace, Consolas, monospace; font-size: 9px; color: #8f8f98; letter-spacing: 0.02em; } .pm-fnf { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-radius: 10px; font-size: 10.5px; font-weight: 600; color: #c2cad6; background: rgba(110, 106, 255, 0.09); border: 1px solid rgba(110, 106, 255, 0.3); cursor: pointer; } .pm-fnf b { color: #e5c178; font-weight: 650; } .pm-fnf input { accent-color: #6e6aff; width: 14px; height: 14px; flex: none; cursor: pointer; } .pm-advanced { grid-column: 1 / -1; margin-top: 1px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .pm-advanced summary { display: flex; align-items: center; gap: 6px; width: fit-content; cursor: pointer; list-style: none; font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; color: #8f8f98; transition: color 0.15s ease; } .pm-advanced summary::-webkit-details-marker { display: none; } .pm-advanced summary::before { content: '鈻?; color: #c8a25a; font-size: 10px; line-height: 1; transition: transform 0.15s ease; } .pm-advanced[open] summary::before { transform: rotate(90deg); } .pm-advanced summary:hover { color: #a1a1aa; } .pm-advanced-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 9px; } #ipfPaywallModal .num { font-variant-numeric: tabular-nums; } .pm-calc-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; align-content: center; } .pm-stat { padding: 11px 12px; border-radius: 11px; background: rgba(8, 9, 12, 0.82); border: 1px solid rgba(255, 255, 255, 0.08); min-width: 0; } .pm-stat.highlight { background: linear-gradient(180deg, rgba(200, 162, 90, 0.13), rgba(11, 13, 18, 0.96)); border-color: rgba(200, 162, 90, 0.42); } .pm-stat-k { display: block; font-size: 9.5px; font-weight: 650; letter-spacing: 0.05em; text-transform: uppercase; color: #a1a1aa; margin-bottom: 4px; } .pm-stat-v { display: block; font-family: ui-monospace, 'JetBrains Mono', Consolas, monospace; font-size: 20px; font-weight: 750; color: #fff; font-variant-numeric: tabular-nums; } .pm-stat-v.gold { color: #e5c178; } .pm-stat-v.emerald { color: #30d158; } .pm-stat-sub { display: block; margin-top: 2px; font-size: 10px; line-height: 1.35; color: #8f8f98; } .pm-fnf-stat { transition: border-color 0.2s ease, background 0.2s ease; } .pm-fnf-stat.active { border-color: rgba(200, 162, 90, 0.42); background: linear-gradient(180deg, rgba(200, 162, 90, 0.11), rgba(8, 9, 12, 0.92)); } .pm-roi-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .pm-roi-badge { flex: none; padding: 3px 8px; border-radius: 999px; font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; font-weight: 750; color: #090a0d; background: linear-gradient(180deg, #dfc07c, #b88d40); border: 1px solid rgba(255, 255, 255, 0.24); font-variant-numeric: tabular-nums; white-space: nowrap; } .pm-roi-netline { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px solid rgba(200, 162, 90, 0.2); font-family: ui-monospace, Consolas, monospace; font-size: 13px; font-weight: 750; color: #fff; font-variant-numeric: tabular-nums; } .pm-roi-usd { display: block; margin-top: 2px; font-size: 10px; color: #a1a1aa; font-variant-numeric: tabular-nums; } .pm-roi-evidence { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 1px; padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, 0.07); } .pm-roi-evidence > span { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1px 8px; padding: 7px 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.06); min-width: 0; } .pm-roi-evidence i { font-style: normal; font-size: 9px; font-weight: 650; letter-spacing: 0.035em; text-transform: uppercase; color: #8f8f98; } .pm-roi-evidence b { font-family: ui-monospace, Consolas, monospace; font-size: 11.5px; color: #fff; font-variant-numeric: tabular-nums; text-align: right; } .pm-roi-evidence em { grid-column: 1 / -1; font-style: normal; font-size: 9px; line-height: 1.35; color: #8f8f98; } .pm-router { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 13px; padding: 11px 14px; border-radius: 12px; background: #0b0d12; border: 1px solid rgba(255, 255, 255, 0.08); font-size: 11px; line-height: 1.45; color: #a1a1aa; } .pm-router strong { color: #fff; } .pm-router code { font-family: ui-monospace, Consolas, monospace; font-size: 10px; color: #b7b5ff; } .pm-router-code { padding: 4px 8px; border-radius: 6px; background: rgba(110, 106, 255, 0.12); border: 1px solid rgba(110, 106, 255, 0.3); max-width: 100%; overflow-wrap: anywhere; } .pm-toast { margin-top: 12px; padding: 11px 14px; border-radius: 11px; background: rgba(48, 209, 88, 0.13); border: 1px solid rgba(48, 209, 88, 0.4); color: #bbf7d0; font-size: 12.5px; font-weight: 650; } .pm-toast[hidden] { display: none; } #ipfPaywallModal button:focus-visible, #ipfPaywallModal select:focus-visible, #ipfPaywallModal input:focus-visible, .plan-pill:focus-visible { outline: 2px solid #e5c178; outline-offset: 2px; } /* round-164: keyboard focus ring shared by the account pill and the dialog */ .nav-account-pill:focus-visible, #ipfAccountModal button:focus-visible, #ipfAccountModal input:focus-visible { outline: 2px solid #c8a25a; outline-offset: 2px; } /* points.com arbitrage hint on a high-value stay */ .points-arb { display: grid; grid-template-columns: minmax(0, auto) minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin: 12px 0 0; padding: 11px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(200, 162, 90, 0.13), rgba(19, 22, 29, 0.9)); border: 1px solid rgba(200, 162, 90, 0.36); } .pa-kicker { font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; font-weight: 750; letter-spacing: 0.07em; text-transform: uppercase; color: #e5c178; white-space: nowrap; } .pa-body { font-size: 12px; line-height: 1.45; color: #e4e4e7; } .pa-body b { color: #e5c178; } .pa-link { flex: none; padding: 6px 11px; border-radius: 999px; font-size: 11px; font-weight: 750; text-decoration: none; color: #090a0d; background: linear-gradient(180deg, #dfc07c, #b88d40); border: 1px solid rgba(255, 255, 255, 0.3); white-space: nowrap; } .pa-link:hover { filter: brightness(1.06); } @media (max-width: 1080px) { .pm-grid { grid-template-columns: 1fr; } .pm-tier.titanium-pro { order: -1; } .pm-context { flex-direction: column; } .pm-context-controls { align-items: flex-start; } .pm-calc { grid-template-columns: 1fr; } } /* The header is a single pill row until it wraps at 760px. The plan badge is new content in that row, so below the widest laptops it drops its action word; below 1080 the decorative live pill yields rather than overlapping the centred view switch. */ @media (max-width: 1220px) { .plan-pill { padding: 5px 10px; } .plan-pill-sep, #planPillAction { display: none; } } @media (max-width: 1080px) { .nav-live { display: none; } } @media (max-width: 760px) { .topnav { flex-wrap: wrap; justify-content: flex-end; max-width: 100%; } .pm-modal { padding: 16px 10px 26px; } .pm-shell { padding: 22px 16px 20px; border-radius: 22px; } .pm-close { top: 11px; right: 11px; } .pm-context { padding: 14px 14px; margin-bottom: 16px; } .pm-headline { font-size: 1.12rem; } .pm-sub { font-size: 12px; } .pm-billing { flex-wrap: wrap; border-radius: 14px; } .pm-billing-btn { padding: 6px 10px; } .pm-concierge { flex-direction: column; align-items: flex-start; } .pm-concierge-cta { width: 100%; } .pm-calc-controls { grid-template-columns: 1fr; } .pm-calc-metrics { grid-template-columns: 1fr; } .pm-advanced-grid { grid-template-columns: 1fr; } .pm-roi-evidence { grid-template-columns: 1fr; } .pm-field.full { grid-column: auto; } .pm-fnf { grid-column: auto; } .points-arb { grid-template-columns: 1fr; align-items: start; } .pa-kicker { white-space: normal; } } @media (max-width: 600px) { .plan-pill { padding: 5px 9px; font-size: 11px; gap: 5px; } .plan-pill-sep, #planPillAction { display: none; } .topnav { flex-wrap: wrap; justify-content: flex-end; } } @media (prefers-reduced-motion: reduce) { .pm-tier, .pm-cta, .plan-pill { transition: none; } } /* 鈹€鈹€ compare filters: recessed cash/distance fields + quick selects 鈹€鈹€鈹€鈹€鈹€鈹€ The top filter row sits over the page atmosphere, so a flat field loses its edge. These fields read as cut into the graphite: near-black well, a visible hairline, and a cyan focus ring that never relies on the label. */ .filterrow .chip.chip-input { padding-right: 10px; } .filterrow .chip.chip-input input[type="number"], .filterrow .chip .filter-select { background-color: rgba(8, 9, 12, 0.78); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 6px; padding: 4px 8px; color: #f5f7fa; font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 68px; box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.72), inset 0 1px 0 rgba(255, 255, 255, 0.035); transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease), background-color 150ms var(--ease); } .filterrow .chip.chip-input input[type="number"] { width: 74px; } .filterrow .chip.chip-input input[type="number"]::placeholder { color: #8c96a6; opacity: 1; } .filterrow .chip.chip-input:hover input[type="number"], .filterrow .chip .filter-select:hover { border-color: rgba(255, 255, 255, 0.34); } .filterrow .chip.chip-input input[type="number"]:focus, .filterrow .chip .filter-select:focus { outline: none; border-color: #38bdf8; box-shadow: 0 0 0 2px rgba(56, 189, 248, 0.25), inset 0 1px 3px rgba(0, 0, 0, 0.72); } .filterrow .chip .filter-select { min-width: 146px; padding-right: 24px; cursor: pointer; } .filterrow .chip .filter-select option { background: #14161b; color: #f5f7fa; } .filter-reset-btn { align-self: center; padding: 6px 12px; font-size: 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); color: #c2cad6; white-space: nowrap; } .filter-reset-btn:hover { border-color: rgba(255, 255, 255, 0.35); color: #ffffff; } /* Round-97 (Prompt 14): the IHG cardholder "4th Night Free" toggle. It is a compact glass chip in the Compare filter row; the active state is warm champagne gold, the one accent the Titanium theme reserves for cardholder value, and it never competes with the blue primary actions. */ .fnf-toggle { align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: #c2cad6; font: inherit; font-size: 12px; font-weight: 650; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease); } .fnf-toggle::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, 0.24); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.035); transition: background 150ms var(--ease), box-shadow 150ms var(--ease); } .fnf-toggle:hover { border-color: rgba(255, 255, 255, 0.35); background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)); color: #ffffff; } .fnf-toggle[aria-pressed="true"] { background: rgba(200, 162, 90, 0.16); border-color: rgba(200, 162, 90, 0.55); color: #f3dfb1; box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.14), 0 0 0 2px rgba(200, 162, 90, 0.06); } .fnf-toggle[aria-pressed="true"]::before { background: #e6c98e; box-shadow: 0 0 0 3px rgba(200, 162, 90, 0.18); } .fnf-toggle[aria-pressed="true"]:hover { background: rgba(200, 162, 90, 0.22); border-color: rgba(200, 162, 90, 0.7); color: #fff0cd; } /* Round-98: the shortlist chip appears only once something is pinned. It is the same compact filter-row geometry as the 4th-night toggle, with a bookmark glyph drawn in CSS so the label stays the single readable "Pinned (2)". */ .pin-toggle { align-self: center; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 30px; padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.16); background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: #c2cad6; font: inherit; font-size: 12px; font-weight: 650; letter-spacing: 0.01em; white-space: nowrap; cursor: pointer; transition: border-color 150ms var(--ease), background 150ms var(--ease), color 150ms var(--ease), box-shadow 150ms var(--ease); } .pin-toggle[hidden] { display: none !important; } .pin-toggle::before { content: ""; width: 8px; height: 10px; border: 1.4px solid currentColor; border-radius: 2px 2px 0 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 76%, 0 100%); opacity: 0.85; } .pin-toggle:hover { border-color: rgba(255, 255, 255, 0.35); background: linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04)); color: #ffffff; } .pin-toggle[aria-pressed="true"] { background: rgba(200, 162, 90, 0.16); border-color: rgba(200, 162, 90, 0.55); color: #f3dfb1; box-shadow: inset 0 1px 0 rgba(255, 236, 196, 0.14); } .pin-toggle[aria-pressed="true"]::before { background: currentColor; opacity: 1; } /* 鈹€鈹€ round-93 (Prompt 10): 12px micro-typography floor 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ The audit found 9鈥?0.5px metadata that needed squinting at. These overrides raise every named micro-label to at least 11.5px without changing layout measurements (labels wrap or grow inside their existing cells). */ .metric .m-total { font-size: 12.5px; } .metric .m-total .t-label { font-size: 11.5px; letter-spacing: 0.07em; } .microlabel { font-size: 12px; letter-spacing: 0.07em; } .notif-delivery, .notif-expired { font-size: 11.5px; } /* 鈹€鈹€ round-96 (Prompt 13): responsive tablet/phone layout polish 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ At 860px the Compare card and the #bestValue hero become one clean column: a 200px full-bleed media header, the identity, a compact two-up cash vs points body, then the verdict and CTA as full-width bars. The hotel stay strip folds from four cells to 2脳2. At 480px the strip becomes 1脳4, the filter bar becomes a two-column grid whose tracks never fall below 130px, and the card/footer controls go full width. Every declaration lives inside a media query, so the desktop 3-column grids above are untouched. */ @media (max-width: 860px) { .topbar { display: flex; height: auto; flex-wrap: wrap; gap: 8px; padding: 10px 14px; border-radius: 26px; } .navswitch { order: 3; width: 100%; justify-content: center; } .hcard, #bestValue.bv-card-3col, #bestValue .bv-card-3col { grid-template-columns: 1fr; grid-template-areas: "media" "name" "pricing" "value" "foot"; min-width: 0; row-gap: 0; border-radius: 18px; } #bestValue.bv-card-3col, #bestValue .bv-card-3col { grid-template-areas: "media" "top" "body" "side" "note"; } .hcard > *, #bestValue.bv-card-3col > *, #bestValue .bv-card-3col > * { min-width: 0; } /* Top media header: full card width and flush to the top border. */ .hcard > .d-media, .hcard > .thumb.c-thumb, #bestValue.bv-card-3col > .d-media, #bestValue.bv-card-3col > .thumb.c-thumb, #bestValue > .thumb.c-thumb, #bestValue .bv-media { width: 100%; height: 200px; min-height: 200px; max-height: 200px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.07); border-radius: 14px 14px 0 0; } .hcard > .d-media.dc-empty, #bestValue.bv-card-3col > .d-media.dc-empty { height: 200px; min-height: 200px; } .hcard > .thumb.c-thumb, #bestValue > .thumb.c-thumb { object-fit: cover; } /* Keep the swipe controls touch-friendly over the photograph. */ .hcard .dc-arrow, #bestValue.bv-card-3col .dc-arrow, .pc-prev, .pc-next { min-width: 32px; min-height: 32px; } .hcard .dc-count, #bestValue.bv-card-3col .dc-count, .pc-count { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; min-height: 32px; } /* Identity and the compact cash vs. points body. */ .hcard .c-name { grid-area: name; padding: 16px 16px 4px; } .hcard .c-split { grid-area: pricing; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 16px 16px; } .hcard .c-split .c-cash, .hcard .c-split .c-points { min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); } .hcard .c-split .m-total { font-size: 22px; white-space: normal; overflow-wrap: anywhere; } /* Verdict and action: full-width bars with the same graphite hairline. */ .hcard .c-value, .hcard .c-foot { border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); padding: 14px 16px; } .hcard .c-value { grid-area: value; justify-content: flex-start; } .hcard .c-foot { grid-area: foot; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; } .hcard .c-foot-takeaway { flex: 1 1 auto; } .hcard .c-act { flex: 0 0 auto; align-self: center; margin-left: auto; } .hcard .c-act .calbtn { min-width: 148px; } /* #bestValue: identity + compact two-up totals, then the verdict/CTA bar. */ #bestValue.bv-card-3col .bv-top, #bestValue .bv-card-3col .bv-top { grid-area: top; padding: 14px 16px 0; } #bestValue.bv-card-3col .bv-name, #bestValue .bv-card-3col .bv-name { font-size: 22px; } #bestValue.bv-card-3col .bv-body, #bestValue .bv-card-3col .bv-body { grid-area: body; padding: 10px 16px 16px; gap: 10px; } #bestValue.bv-card-3col .bv-totals, #bestValue .bv-card-3col .bv-totals { grid-template-columns: 1fr 1fr; gap: 10px; } #bestValue.bv-card-3col .bv-total, #bestValue .bv-card-3col .bv-total { min-width: 0; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.035); border: 1px solid rgba(255, 255, 255, 0.07); } #bestValue.bv-card-3col .bv-total:last-child, #bestValue .bv-card-3col .bv-total:last-child { grid-column: 1 / -1; } #bestValue.bv-card-3col .bv-total b, #bestValue .bv-card-3col .bv-total b { font-size: 18px; white-space: normal; overflow-wrap: anywhere; } #bestValue.bv-card-3col .bv-side, #bestValue.bv-card-3col .bv-verdict-col, #bestValue .bv-card-3col .bv-side { grid-area: side; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; padding: 14px 16px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.07); } #bestValue.bv-card-3col .bv-side .bv-fig, #bestValue .bv-card-3col .bv-side .bv-fig { grid-column: 1; min-width: 0; } #bestValue.bv-card-3col .bv-value { font-size: clamp(34px, 5vw, 42px); } #bestValue.bv-card-3col .bv-cta, #bestValue .bv-card-3col .bv-cta { grid-column: 2; grid-row: 1; width: auto; min-width: 150px; margin-top: 0; } #bestValue.bv-card-3col .bv-ihg, #bestValue .bv-card-3col .bv-ihg { grid-column: 1 / -1; text-align: left; } #bestValue.bv-card-3col .bv-note, #bestValue .bv-card-3col .bv-note { grid-area: note; padding: 0 16px 16px; } /* Hotel detail: the four-cell decision strip folds to 2脳2. */ #staySummary .stay-rate-strip, #staySummary .stay-rate-strip.srs-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } #staySummary .stay-rate-strip > * { min-width: 0; } #staySummary .srs-cell { padding: 12px 14px; } #staySummary .srs-action .stay-link { min-height: 42px; } } @media (max-width: 480px) { html, body, .shell, main { max-width: 100%; overflow-x: hidden; } .hcard, #bestValue.bv-card-3col, #bestValue .bv-card-3col { border-radius: 16px; } .hcard > *, #bestValue.bv-card-3col > *, #bestValue .bv-card-3col > *, #staySummary .stay-rate-strip > *, .filterrow > *, .resultmeta > * { min-width: 0; } .hcard .c-foot { flex-direction: column; align-items: stretch; } .hcard .c-act { width: 100%; margin-left: 0; align-self: stretch; } .hcard .c-act .calbtn { width: 100%; min-width: 0; } #bestValue.bv-card-3col .bv-side, #bestValue .bv-card-3col .bv-side { grid-template-columns: 1fr; } #bestValue.bv-card-3col .bv-cta, #bestValue .bv-card-3col .bv-cta { grid-column: 1; grid-row: auto; width: 100%; min-width: 0; } #bestValue.bv-card-3col .bv-ihg, #bestValue .bv-card-3col .bv-ihg { text-align: center; } /* Hotel stay strip: 2脳2 鈫?one full-width cell per decision. */ #hotelView .stay-summary, #staySummary.stay-summary { padding: 12px; } #staySummary .stay-rate-strip, #staySummary .stay-rate-strip.srs-3 { grid-template-columns: 1fr; gap: 10px; } #staySummary .srs-action .stay-link, #staySummary .srs-action .stay-handoff, #staySummary .srs-action .stay-handoff .stay-link, #hotelView .hotelbar-watch .btn-watch { width: 100%; min-height: 44px; justify-content: center; } #hotelView .hotelbar-watch { flex-direction: column; align-items: stretch; } /* Compare filter bar: two clean columns, never narrower than 130px. */ .filterrow { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; align-items: stretch; } .filterrow > * { width: 100%; } .filterrow .chip { width: 100%; min-width: 0; flex-wrap: wrap; } .filterrow .chip.chip-input, .filterrow .chip.chip-select { align-content: center; } .filterrow .chip.chip-input input[type="number"], .filterrow .chip .filter-select { width: 100%; min-width: 0; } .filterrow #resetFiltersInline, .filterrow .filter-reset-btn { grid-column: 1 / -1; } #maxCash, #maxKm, #minValCat, #sortBy, #sortSel, #resetFiltersBtn, #resetFiltersInline { min-width: 130px; max-width: 100%; } .resultmeta { display: grid; grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 8px; margin: 20px 2px 12px; } .resultmeta .rt-left { grid-column: 1 / -1; min-width: 0; } .resultmeta .sort-wrap { grid-column: 1 / -1; width: 100%; min-width: 0; } .resultmeta .sort-btn, #sortBy, #sortSel { width: 100%; min-width: 130px; justify-content: space-between; } .sort-wrap .cur-panel { width: 100%; min-width: 0; } } /* 鈹€鈹€ Round-99: the quiet organic guide discovery strip 鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€鈹€ A single champagne hairline separates the app from the programmatic SEO guides. Everything is deliberately quieter than the pricing surface: one gold kicker, graphite link tiles, and a metadata line that disappears into the background. Real elements keep the footer crawlable without JS. */ .app-footer, #seoGuidesFooter { position: relative; z-index: 1; width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 clamp(18px, 3.5vw, 40px) 54px; scroll-margin-top: 88px; } .app-footer-inner { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: 20px 42px; padding-top: 30px; border-top: 1px solid rgba(200, 162, 90, 0.17); } .app-footer-intro { min-width: 0; padding-top: 2px; } .app-footer-kicker { display: block; color: #c8a25a; font-size: 9.5px; font-weight: 650; letter-spacing: 0.17em; text-transform: uppercase; } .app-footer-title { margin: 8px 0 9px; color: var(--text); font-size: clamp(18px, 2.2vw, 24px); font-weight: 640; letter-spacing: -0.025em; line-height: 1.22; } .app-footer-sub { max-width: 42ch; margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.65; } .app-footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; min-width: 0; } .app-footer-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px; border: 1px solid rgba(255, 255, 255, 0.065); border-radius: 10px; background: rgba(255, 255, 255, 0.018); color: var(--text-2); text-decoration: none; transition: border-color 160ms ease, background 160ms ease, color 160ms ease; } .app-footer-link:hover, .app-footer-link:focus-visible { border-color: rgba(200, 162, 90, 0.34); background: rgba(200, 162, 90, 0.055); color: var(--text); outline: none; } .app-footer-link-all { border-color: rgba(200, 162, 90, 0.22); background: linear-gradient(120deg, rgba(200, 162, 90, 0.085), rgba(255, 255, 255, 0.015)); } .app-footer-link-copy { display: grid; gap: 2px; min-width: 0; } .app-footer-link-kicker { overflow: hidden; color: #c8a25a; font-size: 9px; font-weight: 600; letter-spacing: 0.12em; line-height: 1.3; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .app-footer-link-name { overflow: hidden; color: var(--text-1); font-size: 12.5px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .app-footer-link-arrow { flex: 0 0 auto; color: #c8a25a; font-size: 12px; opacity: 0.64; transition: transform 160ms ease, opacity 160ms ease; } .app-footer-link:hover .app-footer-link-arrow { opacity: 1; transform: translateX(2px); } /* Guides has its own topbar tab (#navGuides), so the footer only carries the legal metadata line instead of repeating the six destination cards. */ #seoGuidesFooter .app-footer-intro, #seoGuidesFooter .app-footer-links, #seoGuidesFooter .app-footer-link-arrow { display: none !important; } #seoGuidesFooter .app-footer-inner { display: block; padding-top: 18px; } #seoGuidesFooter .app-footer-meta { border-top: 0; padding-top: 0; } .app-footer-meta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.055); color: var(--text-3); font-size: 11px; line-height: 1.5; } .app-footer-brand { color: var(--text-2); font-weight: 600; letter-spacing: 0.01em; } .app-footer-dot { color: rgba(200, 162, 90, 0.55); } .app-footer-meta a { margin-left: auto; color: #c8a25a; text-decoration: none; } .app-footer-meta a:hover { text-decoration: underline; text-underline-offset: 3px; } .app-footer-legal { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; } .app-footer-disclosure { max-width: 96ch; margin: 0; color: var(--text-3); font-size: 11px; line-height: 1.65; } .app-footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 11.5px; } .app-footer-legal-links a { color: #c8a25a; text-decoration: none; } .app-footer-legal-links a:hover, .app-footer-legal-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; outline: none; } @media (max-width: 900px) { .app-footer-inner { grid-template-columns: 1fr; gap: 18px; } .app-footer-meta a { margin-left: 0; } } @media (max-width: 600px) { .app-footer { padding-bottom: 40px; } .app-footer-inner { padding-top: 24px; } .app-footer-links { grid-template-columns: 1fr; } .app-footer-link-kicker, .app-footer-link-name { white-space: normal; } .app-footer-meta { gap: 6px; } } @media (prefers-reduced-motion: reduce) { .app-footer-link, .app-footer-link-arrow { transition: none; } } /* round-100: accessibility */ .skip-link { position: absolute; left: -9999px; top: 8px; z-index: 1000; display: inline-block; padding: 10px 16px; border: 1px solid #c8a25a; border-radius: 999px; background: #13161d; color: #f4f6fa; font-size: 14px; font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap; } .skip-link:focus { left: 16px; border-radius: 999px; } main:focus { outline: none; } :where(a, button, input, select, textarea, [tabindex]:not([tabindex="-1"]), summary):focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: inherit; } @media (max-width: 860px) { .seg-item, .dc-arrow, .dc-prev, .dc-next, .pc-prev, .pc-next, .c-pin-btn, #fourthNightFreeToggle, .fnf-toggle, label[for="fourthNightFreeToggle"], .chip, .chip-toggle, .d-chip, .qc-chip, .filterrow .chip, .lb-close, .lb-prev, .lb-next, .navlink, .topbar .navlink, .topnav .navlink, .navswitch .navlink { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; } } /* round-101: share */ /* The comparison itself is the thing worth sending, so the results header carries one quiet champagne-gold outline pill beside the sort control. */ .btn-ghost.share-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; margin-left: auto; padding: 0 16px; border: 1px solid #c8a25a; border-radius: 999px; background: transparent; color: #f4f6fa; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .btn-ghost.share-btn svg { width: 16px; height: 16px; flex: none; } .btn-ghost.share-btn:hover { background: rgba(200, 162, 90, 0.12); border-color: #d6b36d; color: #f4f6fa; } @media (max-width: 860px) { .btn-ghost.share-btn { min-height: 44px; grid-column: 1 / -1; width: 100%; margin-left: 0; } } /* round-113: copy summary */ /* The share pill answers "send the comparison"; this one answers "send the numbers". It sits beside Share, keeps a 44px touch floor and borrows the same focus ring as every other control. */ .btn-ghost.copy-summary-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 999px; background: transparent; color: var(--text-2); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .btn-ghost.copy-summary-btn:hover { background: rgba(200, 162, 90, 0.12); border-color: #c8a25a; color: #f4f6fa; } .btn-ghost.copy-summary-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } @media (max-width: 860px) { .btn-ghost.copy-summary-btn { grid-column: 1 / -1; width: 100%; margin-left: 0; } } /* round-105: recent searches */ /* The chips are a small glass tray that only exists while the empty city field is focused. Absolute positioning keeps it out of the hero's layout: opening it never pushes the page down, and [hidden] (styles.css) never leaves a gap. */ .spotlight-omnibar { position: relative; } .recent-searches { position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 72; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px; background: linear-gradient(180deg, rgba(30, 30, 33, 0.96), rgba(17, 17, 19, 0.97)); box-shadow: var(--sh-lg); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); animation: pop 180ms var(--ease) both; } .recent-chip, .recent-clear { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; border: 1px solid rgba(200, 162, 90, 0.35); border-radius: 999px; background: rgba(24, 24, 27, 0.72); color: #f4f6fa; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .recent-chip:hover, .recent-chip:focus-visible, .recent-clear:hover, .recent-clear:focus-visible { border-color: rgba(200, 162, 90, 0.65); background: rgba(200, 162, 90, 0.12); color: #c8a25a; } .recent-chip:focus-visible, .recent-clear:focus-visible { box-shadow: var(--focus-ring); } .recent-clear { margin-left: auto; } @media (max-width: 720px) { .recent-searches { padding: 10px; border-radius: 18px; } } /* round-106: offline banner, network error card & no-JS fallback */ /* The banner is a fixed strip above the dynamic-island topbar (z-index 120): smoked glass, one champagne hairline, and no layout shift behind it. It slides in by default; the reduced-motion rule removes that motion entirely. */ .net-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 160; width: 100%; padding: 10px 20px; border-bottom: 1px solid #c8a25a; background: rgba(12, 14, 18, 0.88); color: #f4f6fa; font-size: 14px; line-height: 1.4; text-align: center; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); animation: net-banner-slide 240ms var(--ease) both; } @keyframes net-banner-slide { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* Same titanium card geometry as a result row, with a muted amber edge that marks the failure without turning the whole page into an alarm. */ .net-error-card { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 22px 26px; border: 1px solid var(--border); border-left: 3px solid rgba(200, 162, 90, 0.55); border-radius: var(--r-lg); background: var(--surface); color: var(--text); font-size: 14px; } .net-error-msg { margin: 0; line-height: 1.5; } .net-retry { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border: 1px solid rgba(200, 162, 90, 0.55); border-radius: 999px; background: rgba(200, 162, 90, 0.12); color: #c8a25a; font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: background 140ms ease, border-color 140ms ease, color 140ms ease; } .net-retry:hover { border-color: rgba(200, 162, 90, 0.8); background: rgba(200, 162, 90, 0.2); color: #f4f6fa; } .net-retry:focus-visible { box-shadow: var(--focus-ring); } /* Round-111: while the 429 countdown runs the retry action is unavailable 鈥? visibly, not just semantically. */ .net-retry:disabled, .net-retry:disabled:hover { border-color: rgba(200, 162, 90, 0.28); background: rgba(200, 162, 90, 0.06); color: rgba(200, 162, 90, 0.7); cursor: default; } /* Without JavaScript the page is otherwise a blank shell; this note is the only explanation and route forward. */ .noscript-msg { max-width: 720px; margin: 24px auto; padding: 18px 22px; border: 1px solid rgba(200, 162, 90, 0.4); border-radius: var(--r-lg); background: rgba(28, 28, 30, 0.94); color: var(--text); font-size: 15px; line-height: 1.55; text-align: center; } .noscript-msg a { color: #c8a25a; } @media (max-width: 720px) { .net-error-card { align-items: stretch; flex-direction: column; padding: 18px 20px; } .net-retry { width: 100%; } } @media (prefers-reduced-motion: reduce) { .net-banner { animation: none; } .net-retry { transition: none; } } /* round-108: floating back-to-top control & Value History inline error */ /* The round-106 offline banner is a fixed strip at the TOP (z-index 160), so this bottom-right control can never collide with it. The lowest overlay in the app is .sheet-backdrop (z-index 90); 80 stays below every modal and paywall while remaining above result-page chrome. */ .back-to-top { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 80; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--gold); box-shadow: var(--sh-md); cursor: pointer; opacity: 0; transform: translateY(8px); transition: opacity 180ms var(--ease), transform 180ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease); } .back-to-top[hidden] { display: none; } .back-to-top.is-visible { opacity: 1; transform: translateY(0); animation: back-to-top-in 180ms var(--ease); } @keyframes back-to-top-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .back-to-top:hover { border-color: rgba(200, 162, 90, 0.6); background: var(--surface-2); } .back-to-top:active { transform: scale(0.96); } .back-to-top:focus-visible { box-shadow: var(--focus-ring); } .back-to-top svg { display: block; width: 20px; height: 20px; } .field-error { margin: 6px 0 0; color: var(--danger); font-size: 13px; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .back-to-top, .back-to-top.is-visible { transition: none; animation: none; } } /* round-136: forced-colors (Windows High Contrast) support */ @media (forced-colors: active) { button, .sfield, .wf-input, .wf-select, .pm-select, .cur-panel, [role="dialog"], .toast, .pm-toast, .net-banner { border: 1px solid CanvasText; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; } button[disabled], button[aria-disabled="true"] { color: GrayText; border-color: GrayText; } [aria-pressed="true"], [aria-selected="true"], [aria-current="page"], [aria-current="true"] { forced-color-adjust: none; background: Highlight; color: HighlightText; } .skeleton, [aria-busy="true"] .skeleton { border: 1px dashed CanvasText; } img, svg { forced-color-adjust: auto; } } /* round-140: prefers-contrast: more (OS "Increase contrast" setting) */ @media (prefers-contrast: more) { :root { --text-2: #e6eaf0; --text-3: #d0d6de; --text-secondary: #d0d6de; --text-muted: #b8bec8; --border: rgba(255, 255, 255, 0.35); --border-strong: rgba(255, 255, 255, 0.55); --border-hairline: rgba(255, 255, 255, 0.3); --border-titanium: rgba(255, 255, 255, 0.4); } .wf-input, .sfield, .btn-ghost { border-color: rgba(255, 255, 255, 0.55); } :focus-visible { outline: 3px solid #ffffff; outline-offset: 2px; } } /* round-141: comfortable 44px touch targets on touch screens (WCAG 2.5.5) */ @media (pointer: coarse) { .seg-item, .btn-ghost, .wf-input { min-height: 44px; } .seg-item { min-width: 44px; } .input-clear { min-width: 44px; min-height: 44px; } } /* round-144 (Prompt 61): 100dvh fallbacks so mobile toolbars never cover sheets or the lightbox */ /* round-145 (Prompt 62): scroll inside sheets, dialogs and popovers never chains to the page behind */ .sheet, .lb-shell, .pm-modal, .dr-popover, .shortcuts-dialog, .notif-panel { overscroll-behavior: contain; } /* The header install control stays opt-in; hide it at the CSS layer too. */ #installAppBtn, .install-app-btn { display: none !important; } /* Prompt 65: no grey tap flash on touch screens; :focus-visible rings stay intact */ html { -webkit-tap-highlight-color: transparent; } a, button, [role="button"], label, summary, input, select, textarea { -webkit-tap-highlight-color: transparent; } /* Prompt 66: honour Reduce Transparency - glass becomes solid */ @media (prefers-reduced-transparency: reduce) { *, *::before, *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } header, dialog, [role="dialog"], [class*="sheet"], [class*="toast"], [class*="panel"], [class*="popover"], [class*="menu"] { background-color: #0b0b0c !important; } } /* Round-152 (Prompt 69): keep font sizes stable when phones rotate to landscape. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } /* Round-153 (Prompt 70): focused and anchor-jumped content never hides under the sticky header. */ html { scroll-padding-top: 88px; } /* Round-154 (Prompt 71): reserve the scrollbar's space so layouts don't jump when a sheet locks scrolling. */ html { scrollbar-gutter: stable; } /* round-157: branded caret in text fields */ input[type="text"], input[type="search"], input[type="number"], input[type="email"], input:not([type]), textarea { caret-color: var(--accent, #c8a25a); } /* round-161: brand accent on native controls */ :root { accent-color: var(--accent, #c8a25a); } /* round-162: balanced headings */ h1, h2, h3 { text-wrap: balance; } /* 鈺愨晲鈺?Account Pill & Quick Auth Modal (Resend + Google + Stripe Portal) 鈺愨晲鈺?*/ .nav-account-pill { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: #f4f4f6; font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; cursor: pointer; transition: background 0.16s ease, border-color 0.16s ease; white-space: nowrap; } .nav-account-pill:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(200, 162, 90, 0.45); } /* Signed in: same grey pill as the signed-out state and the other nav pills, no green dot. */ .nav-account-pill[data-authenticated="true"] { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); } .nav-account-dot { display: none !important; } .ipf-account-modal-wrap { position: fixed; inset: 0; z-index: 9600; display: flex; align-items: center; justify-content: center; padding: 20px; } .ipf-account-modal-wrap[hidden] { display: none !important; } .ipf-account-backdrop { position: fixed; inset: 0; background: rgba(5, 7, 12, 0.76); backdrop-filter: blur(8px); } .ipf-account-card { position: relative; z-index: 1; width: 100%; max-width: 460px; background: #13161d; border: 1px solid rgba(200, 162, 90, 0.22); border-radius: 18px; padding: 24px; color: #f3efe6; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65); } .ipf-account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .ipf-account-eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: #c8a25a; margin-bottom: 4px; } .ipf-account-title { margin: 0; font-size: 20px; font-weight: 700; color: #ffffff; } .ipf-account-close { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); color: #cbd5e1; width: 32px; height: 32px; border-radius: 8px; font-size: 20px; line-height: 1; cursor: pointer; } .ipf-account-lead { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #cbd5e1; } .ipf-google-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; height: 42px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: #ffffff; color: #0f172a; font-size: 14px; font-weight: 600; cursor: pointer; } .ipf-google-btn:hover { background: #f1f5f9; } .ipf-auth-divider { display: flex; align-items: center; margin: 16px 0; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; } .ipf-auth-divider::before, .ipf-auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, 0.1); } .ipf-auth-divider span { padding: 0 10px; } .ipf-auth-section[hidden], .ipf-google-btn[hidden], .ipf-auth-divider[hidden] { display: none !important; } .ipf-auth-form { margin-bottom: 14px; } .ipf-auth-label { display: block; font-size: 12px; color: #94a3b8; margin-bottom: 6px; } .ipf-auth-row { display: flex; gap: 8px; } .ipf-auth-input { flex: 1; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.16); background: #0c0e13; color: #f3efe6; font-size: 14px; } .ipf-code-input { letter-spacing: 0.22em; font-weight: 700; text-align: center; } .ipf-btn-primary { height: 40px; padding: 0 16px; border-radius: 10px; border: none; background: linear-gradient(180deg, #d7b56d 0%, #b88f42 100%); color: #08090c; font-size: 13.5px; font-weight: 700; cursor: pointer; white-space: nowrap; } .ipf-btn-secondary { height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.06); color: #f8fafc; font-size: 13.5px; font-weight: 600; cursor: pointer; } .ipf-btn-ghost { height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.08); color: #fca5a5; font-size: 13px; font-weight: 600; cursor: pointer; } .ipf-account-profile { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 16px; } .ipf-account-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #d7b56d, #9e7830); color: #08090c; font-size: 18px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .ipf-account-name { font-size: 15px; font-weight: 700; color: #ffffff; } .ipf-account-email { font-size: 12.5px; color: #94a3b8; margin-bottom: 6px; } .ipf-account-badges { display: flex; flex-wrap: wrap; gap: 6px; } .ipf-badge-tier { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: rgba(200, 162, 90, 0.16); color: #e5c178; border: 1px solid rgba(200, 162, 90, 0.35); } .ipf-badge-sync { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: rgba(16, 185, 129, 0.14); color: #6ee7b7; } .ipf-account-actions { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; } .ipf-account-status { padding: 10px 12px; border-radius: 10px; font-size: 12.5px; margin-bottom: 14px; } .ipf-account-status.is-ok { background: rgba(16, 185, 129, 0.15); border: 1px solid rgba(16, 185, 129, 0.35); color: #6ee7b7; } .ipf-account-status.is-error { background: rgba(239, 68, 68, 0.15); border: 1px solid rgba(239, 68, 68, 0.35); color: #fca5a5; } .ipf-account-footnote { margin: 12px 0 0; font-size: 11.5px; color: #8d99ab; line-height: 1.45; } .ipf-auth-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9800; background: #0f172a; color: #f8fafc; border: 1px solid rgba(16, 185, 129, 0.5); border-radius: 12px; padding: 12px 18px; font-size: 13.5px; font-weight: 600; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); } @media (max-width: 440px) { .ipf-account-card { padding: 18px 16px; } .ipf-auth-row { flex-direction: column; } .ipf-auth-input { flex: none; width: 100%; height: 40px; } .ipf-btn-primary { width: 100%; } } .sheet-body .wf-city-ac-wrap { position: relative; width: 100%; min-width: 0; flex: 0 0 auto; display: flex; flex-direction: column; } .sheet-body .wf-city-ac-wrap .ac-panel { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 260; max-height: 220px; overflow-y: auto; margin-top: 0; } #briefing, .briefing, #returnCard, .return-card { display: none !important; } /* founder admin: self-service card, dashboard and user table */ .ipf-founder-card { margin: 0 0 16px; padding: 14px 16px; border-radius: 14px; background: linear-gradient(180deg, rgba(200, 162, 90, 0.14), rgba(200, 162, 90, 0.05)); border: 1px solid rgba(200, 162, 90, 0.38); } .ipf-founder-eyebrow { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.12em; color: #e5c178; margin-bottom: 4px; } .ipf-founder-title { margin: 0 0 6px; font-size: 15px; font-weight: 750; color: #ffffff; } .ipf-founder-lead { margin: 0 0 10px; font-size: 12px; line-height: 1.5; color: #cbd5e1; } .ipf-founder-self { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(200, 162, 90, 0.24); } .ipf-founder-self-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; margin-bottom: 7px; } .ipf-founder-self-btns { display: flex; flex-wrap: wrap; gap: 8px; } .ipf-founder-self-btns .ipf-btn-ghost { flex: 1 1 auto; height: 34px; font-size: 12px; } .ipf-admin-modal-wrap { position: fixed; inset: 0; z-index: 9700; display: flex; align-items: center; justify-content: center; padding: 20px; } .ipf-admin-modal-wrap[hidden] { display: none !important; } .ipf-admin-card { position: relative; z-index: 1; width: 100%; max-width: 1080px; max-height: 90vh; overflow-y: auto; background: #13161d; border: 1px solid rgba(200, 162, 90, 0.22); border-radius: 18px; padding: 24px; color: #f3efe6; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.65); } .ipf-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .ipf-admin-eyebrow { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; color: #c8a25a; margin-bottom: 4px; } .ipf-admin-title { margin: 0; font-size: 22px; font-weight: 700; color: #ffffff; } .ipf-admin-section-title { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: #ffffff; } .ipf-admin-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; } .ipf-admin-kpi { padding: 11px 13px; border-radius: 12px; background: #0c0e13; border: 1px solid rgba(255, 255, 255, 0.1); min-width: 0; } .ipf-admin-kpi-label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #94a3b8; margin-bottom: 4px; } .ipf-admin-kpi-value { display: block; font-size: 16px; font-weight: 750; color: #e5c178; } .ipf-admin-grant { margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: #0c0e13; border: 1px solid rgba(255, 255, 255, 0.1); } .ipf-admin-grant-fields { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 10px; align-items: end; } .ipf-admin-grant-fields .ipf-auth-label { display: flex; flex-direction: column; gap: 6px; margin: 0; } .ipf-admin-grant-fields .ipf-auth-input, .ipf-admin-grant-fields .pm-select { height: 40px; width: 100%; } .ipf-admin-grant-fields .ipf-btn-primary { height: 40px; white-space: nowrap; } .ipf-admin-users-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; } .ipf-admin-users-head .ipf-admin-section-title { margin: 0; } #ipfAdminSearchInput { max-width: 320px; } .ipf-admin-table-wrap { overflow-x: auto; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; } .ipf-admin-table { width: 100%; border-collapse: collapse; font-size: 12px; min-width: 940px; } .ipf-admin-table th { position: sticky; top: 0; background: #181c24; color: #94a3b8; text-align: left; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); white-space: nowrap; } .ipf-admin-table td { padding: 9px 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.06); vertical-align: middle; color: #e2e8f0; } .ipf-admin-table tbody tr:hover { background: rgba(255, 255, 255, 0.03); } .ipf-admin-table code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; color: #cbd5e1; } .ipf-admin-email { font-weight: 650; color: #ffffff; } .ipf-admin-sub { color: #64748b; } .ipf-admin-tier-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: rgba(200, 162, 90, 0.16); color: #e5c178; border: 1px solid rgba(200, 162, 90, 0.35); white-space: nowrap; } .ipf-admin-tier-badge[data-tier="FREE_EXPLORER"] { background: rgba(148, 163, 184, 0.12); color: #cbd5e1; border-color: rgba(148, 163, 184, 0.3); } .ipf-admin-tier-select { min-width: 132px; height: 32px; border-radius: 8px; background: #0c0e13; color: #f3efe6; border: 1px solid rgba(255, 255, 255, 0.16); font-size: 11.5px; } .ipf-admin-empty { margin: 0; padding: 18px; font-size: 12.5px; color: #94a3b8; } @media (max-width: 760px) { .ipf-admin-card { padding: 18px 14px; } .ipf-admin-grant-fields { grid-template-columns: 1fr; } .ipf-admin-users-head { align-items: flex-start; } #ipfAdminSearchInput { max-width: none; width: 100%; } } /* 鈺愨晲鈺?WAVE 25 POLISH (Prompts 105鈥?12) 鈺愨晲鈺?*/ /* [t46u] Explore live scan loader card */ .d-scan-loader { display: flex; flex-direction: column; gap: 12px; padding: 20px 24px; margin-bottom: 18px; border-radius: 16px; background: linear-gradient(180deg, rgba(20, 22, 28, 0.96), rgba(12, 14, 18, 0.98)); border: 1px solid rgba(200, 162, 90, 0.34); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45); } .d-scan-loader-head { display: flex; align-items: center; gap: 14px; } .d-scan-spinner { width: 24px; height: 24px; border-radius: 50%; border: 2.5px solid rgba(200, 162, 90, 0.22); border-top-color: #e5c178; animation: ipfScanSpin 0.85s linear infinite; flex-shrink: 0; } @keyframes ipfScanSpin { to { transform: rotate(360deg); } } .d-scan-copy { display: flex; flex-direction: column; gap: 3px; } .d-scan-title { font-size: 14px; font-weight: 700; color: #f3efe6; } .d-scan-sub { font-size: 12.5px; color: #cbd5e1; } .d-scan-bar { height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); overflow: hidden; } .d-scan-bar-fill { height: 100%; width: 45%; border-radius: 999px; background: linear-gradient(90deg, #b89146, #e5c178, #b89146); animation: ipfScanSlide 1.3s ease-in-out infinite; } @keyframes ipfScanSlide { 0% { transform: translateX(-80%); } 50% { transform: translateX(120%); } 100% { transform: translateX(-80%); } } /* [t47u] Points Guardian structured side-by-side comparison */ .g-compare-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.025); border: 1px solid rgba(255, 255, 255, 0.07); } .g-compare-col { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .g-compare-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #94a3b8; } .g-compare-v { font-size: 15px; font-weight: 750; color: #f3efe6; } .g-compare-sub { font-size: 11.5px; color: #94a3b8; } .g-compare-arrow { font-size: 16px; font-weight: 700; color: #c8a25a; padding: 0 4px; } .g-compare-savings { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 8px; width: 100%; } /* [t48u] Pricing Modal 2-Line Headline */ .pm-headline-line1, .pm-headline-line2 { display: block; } .pm-headline-line2 { margin-top: 4px; color: #e5c178; font-weight: 650; } #ctxHeadline { white-space: pre-line; } /* [t51u] Pricing Modal Active Tier Status Banner & CTA states */ .pm-status-banner { margin: 0 0 16px; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; line-height: 1.45; color: #f5e2b8; background: linear-gradient(90deg, rgba(200, 162, 90, 0.18), rgba(200, 162, 90, 0.08)); border: 1px solid rgba(200, 162, 90, 0.45); } .pm-status-banner[data-tone="indigo"] { color: #dbeafe; background: linear-gradient(90deg, rgba(99, 102, 241, 0.2), rgba(99, 102, 241, 0.08)); border-color: rgba(129, 140, 248, 0.45); } .pm-cta.is-included { opacity: 0.78; background: rgba(255, 255, 255, 0.05); color: #cbd5e1; border: 1px solid rgba(255, 255, 255, 0.14); } .pm-cta.is-current-plan { box-shadow: 0 0 0 1px rgba(229, 193, 120, 0.75), 0 8px 24px rgba(200, 162, 90, 0.24); } /* [t45u] Founder Admin Dashboard Interactive Telemetry & Bento Grid */ .ipf-admin-head-actions { display: flex; align-items: center; gap: 10px; } .ipf-admin-refresh-btn { height: 34px; padding: 0 12px; font-size: 12px; } .ipf-admin-kpi { cursor: pointer; transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .ipf-admin-kpi:hover { border-color: rgba(200, 162, 90, 0.48); transform: translateY(-1px); } .ipf-admin-kpi.is-active { border-color: rgba(229, 193, 120, 0.78); background: linear-gradient(180deg, rgba(200, 162, 90, 0.14), rgba(12, 14, 19, 0.96)); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); } .ipf-admin-kpi-sub { display: block; margin-top: 4px; font-size: 11px; color: #94a3b8; } .ipf-admin-chart-panel { margin-bottom: 18px; padding: 14px 16px; border-radius: 14px; background: #0c0e13; border: 1px solid rgba(255, 255, 255, 0.1); } .ipf-admin-chart-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .ipf-admin-chart-kicker { display: block; font-size: 10px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #c8a25a; } .ipf-admin-chart-title { margin: 2px 0 0; font-size: 15px; font-weight: 750; color: #ffffff; } .ipf-admin-chart-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ipf-admin-seg { display: inline-flex; background: #141821; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 8px; padding: 2px; } .ipf-admin-seg-btn { border: 0; background: transparent; color: #94a3b8; font-size: 11px; font-weight: 650; padding: 4px 9px; border-radius: 6px; cursor: pointer; } .ipf-admin-seg-btn.is-active { background: rgba(200, 162, 90, 0.22); color: #f5e2b8; } .ipf-admin-chart-readout { font-size: 11.5px; color: #cbd5e1; margin-bottom: 8px; } .ipf-admin-chart-svg-wrap { width: 100%; overflow: hidden; } .ipf-admin-chart-svg { width: 100%; height: auto; display: block; } .ipf-admin-grid-line { stroke: rgba(255, 255, 255, 0.07); stroke-dasharray: 3 3; } .ipf-admin-axis-label { fill: #64748b; font-size: 10px; font-family: ui-monospace, Consolas, monospace; } @media (max-width: 640px) { /* The chart SVG scales to the screen; keep axis text legible on phones. */ .ipf-admin-axis-label { font-size: 20px; } .ipf-admin-chart-controls { width: 100%; } .ipf-admin-seg-btn { font-size: 12px; padding: 6px 10px; } } .ipf-admin-chart-dot { fill: #0c0e13; stroke: #e5c178; stroke-width: 2px; cursor: pointer; } .ipf-admin-chart-dot:hover { r: 6px; fill: #e5c178; } .ipf-admin-insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 18px; } .ipf-admin-bento-card { padding: 13px 15px; border-radius: 12px; background: #0c0e13; border: 1px solid rgba(255, 255, 255, 0.1); } .ipf-admin-bento-title { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #e5c178; } .ipf-admin-bar-row { margin-bottom: 8px; } .ipf-admin-bar-meta { display: flex; justify-content: space-between; font-size: 11.5px; color: #cbd5e1; margin-bottom: 3px; } .ipf-admin-bar-track { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.07); overflow: hidden; } .ipf-admin-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #b89146, #e5c178); } .ipf-admin-dest-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.05); font-size: 12px; } .ipf-admin-dest-row:last-child { border-bottom: 0; } .ipf-admin-dest-name { color: #f3efe6; font-weight: 600; } .ipf-admin-dest-count { color: #94a3b8; font-size: 11.5px; } .ipf-admin-section-sub { margin: 2px 0 0; font-size: 12px; color: #94a3b8; } .ipf-admin-users-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ipf-admin-grant-toggle { height: 36px; padding: 0 12px; font-size: 12px; white-space: nowrap; } /* [t57u] Hide Calendar methodology legend and Data details block */ #notes, .notes, .notes-list, .data-details { display: none !important; } /* [t60u] Universal dark-titanium custom dropdowns across sheets, modals & forms */ .sheet-body { overflow: visible !important; } .ipf-native-select-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; } .ipf-select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 176px; flex: 0 1 auto; } .ipf-select-wrap.ipf-select-block, .sheet-body .wf-hotel-pick .ipf-select-wrap { display: flex; width: 100%; min-width: 0; flex: 0 0 auto; } .ipf-select-trigger { width: 100%; min-height: 40px; height: 40px; padding: 8px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); color: #f5f7fa; font-size: 14px; font-weight: 600; display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; cursor: pointer; box-sizing: border-box; transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease; } .ipf-select-trigger:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.22); } .ipf-select-trigger[aria-expanded="true"] { border-color: #c8a25a !important; box-shadow: 0 0 0 3px rgba(200, 162, 90, 0.18) !important; background: rgba(255, 255, 255, 0.08); } .ipf-select-trigger.is-placeholder .ipf-select-value { color: rgba(245, 247, 250, 0.72); } .ipf-select-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ipf-select-in-sheet .ipf-select-trigger { padding-left: 24px; padding-right: 14px; } .ipf-select-in-sheet .ipf-select-value { text-align: center; } .ipf-select-panel.cur-panel { position: absolute; top: calc(100% + 8px); left: 0; min-width: 100%; max-height: 260px; overflow-y: auto; z-index: 280; padding: 6px; border-radius: 14px; background: #1f1f22; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 24px 64px rgba(0, 0, 0, 0.78); } .ipf-select-in-sheet:not(.ipf-select-block) .ipf-select-panel.cur-panel { left: auto; right: 0; min-width: 210px; } .ipf-select-block .ipf-select-panel.cur-panel { left: 0; right: 0; width: 100%; } .ipf-select-item.cur-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 9px 14px; border: 0; border-radius: 9px; background: transparent; color: #f5f5f7; font-size: 13.5px; font-weight: 500; cursor: pointer; transition: background 140ms ease, color 140ms ease; } .ipf-select-item.cur-item:hover { background: rgba(255, 255, 255, 0.08); } .ipf-select-item.cur-item.active { background: rgba(200, 162, 90, 0.14); color: #ffffff; font-weight: 650; } .ipf-select-item.cur-item .cur-check { color: #e5c178; font-size: 12.5px; font-weight: 700; flex: none; } .ipf-select-item-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; } .ipf-select-in-sheet .ipf-select-item-label { text-align: center; } /* [t66u] iOS Safari mobile scroll fix for Pricing, Account, Admin & Sheet modals */ .pm-shell { touch-action: pan-y; } .sheet { -webkit-overflow-scrolling: touch; touch-action: pan-y; } .ipf-account-modal-wrap, .ipf-admin-modal-wrap { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .ipf-account-card, .ipf-admin-card { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } @media (max-width: 768px) { .pm-modal { align-items: flex-start; padding: 12px 10px calc(28px + env(safe-area-inset-bottom, 0px)); } .ipf-account-modal-wrap, .ipf-admin-modal-wrap { align-items: flex-start; padding: 16px 12px calc(28px + env(safe-area-inset-bottom, 0px)); } .ipf-account-card { margin: auto 0; } } /* ?? iOS Safari & Mobile Modal Touch-Scroll Fix (Pricing / Account / Admin / Sheets) ?? */ /* Global overflow & truncation safeguards for custom selects and date-picker presets */ .ipf-select-wrap { max-width: 100%; min-width: 0; box-sizing: border-box; } .ipf-select-trigger { max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; } .ipf-select-value { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dr-head .dr-presets button, .dr-presets button { width: auto !important; min-width: max-content !important; height: 34px !important; min-height: 34px !important; padding: 0 12px !important; border-radius: 999px !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } /* Issue 1: iOS Safari modal scrolling ? single block scroll container without nested scrollbars or flex-centering lock */ .pm-modal, .ipf-account-modal-wrap, .ipf-admin-modal-wrap { -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } .pm-shell, .ipf-account-card, .ipf-admin-card, .sheet, .sheet-inner, .sheet-body { touch-action: pan-y; } @media (max-width: 768px) { /* 1. Pricing, Account, and Admin modals: single vertical block scroll container on iOS Safari */ .pm-modal, .ipf-account-modal-wrap, .ipf-admin-modal-wrap { display: block !important; position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; overflow-y: scroll !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; pointer-events: auto !important; padding: 12px 10px calc(56px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; } .pm-shell, .ipf-account-card, .ipf-admin-card { display: block !important; width: 100% !important; max-width: 520px !important; height: auto !important; max-height: none !important; overflow: visible !important; margin: 0 auto 24px !important; box-sizing: border-box !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; touch-action: pan-y !important; } .pm-shell { padding: 20px 14px 24px !important; border-radius: 20px !important; } /* Bottom sheets (#guardianSheet & #watchSheet): smooth native scrolling */ .sheet { width: calc(100vw - 16px) !important; max-width: 500px !important; max-height: calc(100vh - 44px) !important; max-height: calc(100dvh - 44px) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; touch-action: pan-y !important; box-sizing: border-box !important; } .sheet-inner { padding: 18px 14px calc(28px + env(safe-area-inset-bottom, 0px)) !important; box-sizing: border-box !important; } /* 2. Issue 2: Points Guardian & Rate Watch sheet rows, inputs, labels, and Advanced grid */ .sheet-body > .wf-row, #gfPointsRow { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 8px !important; padding: 12px 14px !important; min-height: 0 !important; box-sizing: border-box !important; } .sheet-body > .wf-row > .wf-label, #gfBookedPtsLabel { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; overflow-wrap: break-word !important; text-align: left !important; font-size: 13.5px !important; line-height: 1.35 !important; } .sheet-body > .wf-row > .wf-value { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; } /* Prevent flex-basis (240px / 160px) from turning into vertical height when .wf-row is column! */ .sheet-body .wf-input, .sheet-body .wf-select, .sheet-body > .wf-contact-row > .wf-input, #gfBookedPts, #gNotifyEmail, #gWebhookUrl, #wNotifyEmail, #wWebhookUrl, #gfDeadline, #gfMinSavings, #wfMaxPoints, #wfMinValue, #gfHotelSearch { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; max-height: 48px !important; padding: 0 12px !important; text-align: left !important; box-sizing: border-box !important; } .sheet-body .ipf-select-wrap, .sheet-body .cur-wrap { flex: 0 0 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .sheet-body .ipf-select-trigger { width: 100% !important; max-width: 100% !important; height: 44px !important; min-height: 44px !important; max-height: 48px !important; } .sheet-body .wf-dates { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 6px !important; width: 100% !important; max-width: 100% !important; } .sheet-body .wf-dates input.wf-input[type="date"] { flex: 1 1 0% !important; width: auto !important; min-width: 0 !important; height: 44px !important; min-height: 44px !important; max-height: 48px !important; padding: 0 8px !important; font-size: 16px !important; } /* Stack Advanced section into 1 clean vertical column so Cancellation deadline and Alert me never collide */ .sheet-body .wf-advanced .wf-adv-grid, .wf-adv-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } .sheet-body .wf-advanced .wf-adv-grid > label, .wf-adv-grid > label { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .sheet-body .wf-advanced .wf-dates, .wf-adv-grid .wf-dates { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 8px !important; width: 100% !important; } #gfMinSavings { flex: 1 1 0% !important; width: auto !important; } .sheet-foot { display: flex !important; flex-direction: row !important; gap: 10px !important; width: 100% !important; } .sheet-foot > button { flex: 1 1 auto !important; min-height: 44px !important; } /* 4. Issue 4: Hotel View header (.hotelbar) and Hotel dropdown overflow fix */ .hotelbar { position: relative !important; top: auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 14px !important; box-sizing: border-box !important; overflow: visible !important; } .hotelbar-head, .hotelbar-main, .hoteltitle { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box !important; } .hoteltitle .hotelname { overflow-wrap: break-word !important; word-break: break-word !important; } .hotelbar-controls { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 8px !important; box-sizing: border-box !important; } .hotelbar-controls .ctl-group { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; box-sizing: border-box !important; } .hotelbar-controls .ctl-group .microlabel { font-size: 12px; flex: 0 0 64px !important; text-align: left !important; } .hotelbar-controls .ctl-group .ipf-select-wrap, .hotelbar-controls .ctl-group .cur-wrap { flex: 1 1 0% !important; width: calc(100% - 74px) !important; max-width: calc(100% - 74px) !important; min-width: 0 !important; } .hotelbar-controls .ctl-group .ipf-select-trigger, .hotelbar-controls .ctl-group .cur-wrap > button { width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow: hidden !important; } /* 5. Issue 5: Date-range picker popover (.dr-popover) header and preset pills on mobile */ .dr-popover { width: calc(100vw - 24px) !important; max-width: 400px !important; padding: 14px 12px !important; box-sizing: border-box !important; } .dr-head { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; row-gap: 10px !important; column-gap: 8px !important; margin-bottom: 12px !important; } .dr-head > button.iconbtn, .dr-head > button { width: 38px !important; height: 38px !important; flex: 0 0 38px !important; } .dr-head > span { flex: 1 1 calc(100% - 96px) !important; text-align: center !important; font-size: 15px !important; font-weight: 650 !important; } .dr-presets { flex: 0 0 100% !important; width: 100% !important; margin-left: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; } .dr-head .dr-presets button, .dr-presets button { flex: 1 1 0% !important; max-width: 112px !important; width: auto !important; height: 34px !important; min-height: 34px !important; padding: 0 10px !important; border-radius: 999px !important; font-size: 12px !important; white-space: nowrap !important; } .dr-grid { gap: 3px !important; } .dr-cell { height: 36px !important; font-size: 13px !important; border-radius: 8px !important; } } /* 3. Issue 3: Hotel View 7-column monthly calendar (#calendar / .calendar) compact mobile cells */ @media (max-width: 640px) { .hotel-bento .calendar-card, .calendar-card { padding: 14px 8px !important; border-radius: 18px !important; box-sizing: border-box !important; } .calhead, .monthbar, .hotelbar-watch { padding-left: 4px !important; padding-right: 4px !important; } .calhead .seg, .history-sec .h-view .seg { max-width: 100% !important; overflow-x: auto !important; } #calendar, .calendar { gap: 3px !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; } .calendar .dow { font-size: 10px !important; letter-spacing: 0.03em !important; padding: 2px 0 6px !important; text-align: center !important; } .calendar .day, .mode-VALUE .day, .mode-DUAL .day, .mode-CASH .day, .mode-POINTS .day { height: 62px !important; min-height: 62px !important; aspect-ratio: auto !important; border-radius: 10px !important; padding: 5px 1.5px 5px !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: space-between !important; text-align: center !important; overflow: hidden !important; box-sizing: border-box !important; } .calendar .day.empty { height: 62px !important; min-height: 62px !important; } .calendar .day .num { font-size: 10.5px !important; line-height: 1 !important; width: 100% !important; text-align: left !important; padding-left: 3px !important; box-sizing: border-box !important; } .calendar .day[data-value-tier]::before { top: 5px !important; right: 4px !important; width: 5px !important; height: 5px !important; } .calendar .day .val, .mode-VALUE .day .val { font-size: 9.5px !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.05em !important; margin-top: auto !important; width: 100% !important; text-align: center !important; white-space: nowrap !important; overflow: hidden !important; } .calendar .day .mid { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 1px !important; margin-top: auto !important; } .calendar .day .cash, .mode-DUAL .day .cash, .mode-CASH .day .cash { font-size: 10px !important; font-weight: 650 !important; line-height: 1.15 !important; letter-spacing: -0.03em !important; width: 100% !important; text-align: center !important; white-space: nowrap !important; } .calendar .day .pts, .mode-DUAL .day .pts, .mode-POINTS .day .pts { font-size: 9px !important; font-weight: 600 !important; line-height: 1.15 !important; letter-spacing: -0.04em !important; width: 100% !important; text-align: center !important; white-space: nowrap !important; } .mode-CASH .day .cash, .mode-POINTS .day .pts { font-size: 10.5px !important; margin-top: auto !important; } /* Topbar & navigation compactness on narrow phones (360px - 430px) */ .topbar { padding: 10px 12px !important; gap: 8px !important; } .topbar-right { max-width: 100% !important; min-width: 0 !important; flex-wrap: wrap !important; justify-content: center !important; } .navswitch { max-width: 100% !important; width: 100% !important; box-sizing: border-box !important; } .navswitch .navtab, .navswitch .navlink { flex: 1 1 0% !important; min-width: 0 !important; padding: 0 8px !important; font-size: 12.5px !important; justify-content: center !important; text-align: center !important; } /* Compare view filter bar: rounded cards instead of 158x106 circles, keep label text on line 1 and input/select on line 2 */ .filterrow .chip, .filterrow .chip-toggle, .filterrow .filter-reset-btn { border-radius: 12px !important; padding: 8px 10px !important; min-height: 44px !important; box-sizing: border-box !important; } .filterrow .chip.chip-input, .filterrow .chip.chip-select { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; align-content: center !important; justify-content: flex-start !important; gap: 4px 4px !important; font-size: 12px !important; line-height: 1.25 !important; } .filterrow .chip.chip-input input[type="number"], .filterrow .chip.chip-select .ipf-select-wrap { order: 2 !important; flex: 1 0 100% !important; width: 100% !important; min-width: 0 !important; height: 34px !important; margin-top: 2px !important; } .filterrow .chip.chip-select .ipf-select-trigger { width: 100% !important; height: 34px !important; min-height: 34px !important; padding: 0 26px 0 8px !important; font-size: 12px !important; box-sizing: border-box !important; } /* Custom dropdown panels (.ipf-select-panel): clamp strictly inside mobile viewport */ .ipf-select-wrap .ipf-select-panel, .hotelbar-controls .ctl-group .ipf-select-panel { min-width: 0 !important; width: 100% !important; max-width: calc(100vw - 24px) !important; left: 0 !important; right: auto !important; box-sizing: border-box !important; } .filterrow .chip.chip-select .ipf-select-panel { min-width: 0 !important; width: 100% !important; max-width: calc(100vw - 24px) !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } .ipf-select-panel .ipf-select-item { white-space: normal !important; line-height: 1.3 !important; text-align: left !important; } /* Compare brand category chips (.tierbar / .tierchip): wrap cleanly as single-line pills */ .tierbar { flex-wrap: wrap !important; overflow-x: visible !important; gap: 8px !important; padding-bottom: 4px !important; } .tierbar .tierchip { flex: 0 1 auto !important; max-width: 100% !important; min-height: 40px !important; padding: 6px 12px !important; border-radius: 999px !important; } .tierbar .tierchip .tierchip-main { white-space: nowrap !important; } /* Compare results header: Share & Copy summary side-by-side in 2-col grid */ .resultmeta .btn-ghost.share-btn, .resultmeta .btn-ghost.copy-summary-btn { grid-column: auto !important; width: 100% !important; min-width: 0 !important; padding: 0 10px !important; font-size: 12.5px !important; justify-content: center !important; } /* Home empty state quick-comparison cities: label on its own centered line, 2x3 balanced city pills */ .quick-cities .qc-label { flex: 0 0 100% !important; width: 100% !important; text-align: center !important; margin-bottom: 2px !important; } /* Date-range picker popover: scrollable vertically when 2 months stack on mobile */ .dr-popover { max-height: min(540px, calc(100vh - 110px)) !important; max-height: min(540px, calc(100dvh - 110px)) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; } /* Hotel photo lightbox: full-width aspect-ratio stage with overlaid Prev/Next buttons */ .lb-stage { position: relative !important; display: block !important; padding: 10px !important; } .lb-img { display: block !important; width: 100% !important; aspect-ratio: 3 / 2 !important; min-height: 200px !important; max-height: 56vh !important; object-fit: cover !important; border-radius: 12px !important; background: rgba(255, 255, 255, 0.04) !important; } .lb-prev, .lb-next { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 2 !important; width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; background: rgba(14, 15, 18, 0.78) !important; } .lb-prev { left: 16px !important; } .lb-next { right: 16px !important; } /* My Trips (#/watches): 2-column header actions and 3-column stay card action grid */ .wt-head-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; } .wt-head-actions > .btn-ghost, .wt-head-actions > button { width: 100% !important; min-width: 0 !important; min-height: 42px !important; padding: 0 8px !important; font-size: 12.5px !important; justify-content: center !important; white-space: nowrap !important; } .wt-actions { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px !important; width: 100% !important; } .wt-actions .wt-act { width: 100% !important; min-height: 38px !important; padding: 6px 8px !important; font-size: 12px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; box-sizing: border-box !important; } } /* ========================================================================== Wave 27 ? Sign-In / Account Modal & Deep-Dive Mobile + Desktop Optimization ========================================================================== */ /* Account modal shared ergonomics (desktop & mobile) */ #ipfAccountModal .ipf-account-close { width: 40px; height: 40px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0; } #ipfAccountModal .ipf-auth-input { height: 46px; min-height: 46px; font-size: 16px; box-sizing: border-box; } #ipfAccountModal .ipf-btn-primary, #ipfAccountModal .ipf-btn-secondary, #ipfAccountModal .ipf-google-btn { height: 46px; min-height: 46px; box-sizing: border-box; } #ipfAccountModal .ipf-btn-ghost { height: 44px; min-height: 44px; box-sizing: border-box; } #ipfAccountModal .ipf-auth-subactions { margin-top: 8px; display: flex; justify-content: flex-start; } #ipfAccountModal .ipf-link-btn { background: transparent; border: none; color: #c8a25a; font-size: 13px; font-weight: 600; padding: 6px 2px; min-height: 40px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } #ipfAccountModal .ipf-link-btn:hover { color: #e3c47a; } @media (min-width: 769px) { .ipf-account-modal-wrap { align-items: center; justify-content: center; padding: 24px 16px; } .ipf-account-card { width: 100%; max-width: 460px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 26px 28px; } } @media (max-width: 768px) { /* Native bottom-anchored / full-height sheet for Sign-In & Account on mobile */ .ipf-account-modal-wrap { display: flex !important; flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; padding: 0 !important; overflow-y: hidden !important; } .ipf-account-card { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 22px 22px 0 0 !important; border-left: none !important; border-right: none !important; border-bottom: none !important; padding: 20px 18px calc(22px + env(safe-area-inset-bottom, 0px)) !important; max-height: calc(100vh - 16px) !important; max-height: calc(100dvh - 16px) !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; overscroll-behavior: contain !important; box-sizing: border-box !important; box-shadow: 0 -16px 44px rgba(0, 0, 0, 0.72) !important; } .ipf-account-head { position: sticky !important; top: -20px !important; z-index: 3 !important; margin: -20px -18px 14px -18px !important; padding: 18px 18px 12px 18px !important; background: rgba(19, 22, 29, 0.96) !important; backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important; } /* Stack email/code input + primary CTA cleanly on mobile so both are full-width and thumb-reachable */ #ipfAccountModal .ipf-auth-row { flex-direction: column !important; gap: 10px !important; } #ipfAccountModal .ipf-auth-input, #ipfAccountModal .ipf-btn-primary, #ipfAccountModal .ipf-btn-secondary, #ipfAccountModal .ipf-google-btn { width: 100% !important; height: 48px !important; min-height: 48px !important; font-size: 16px !important; flex: none !important; } #ipfAccountModal .ipf-btn-ghost { width: 100% !important; height: 44px !important; min-height: 44px !important; font-size: 14px !important; } .ipf-auth-toast { left: 16px !important; right: 16px !important; bottom: calc(18px + env(safe-area-inset-bottom, 0px)) !important; max-width: none !important; text-align: center !important; pointer-events: none !important; } /* Prevent iOS Safari auto-zoom on focus across ALL text/date/email/number/select inputs */ input[type="text"], input[type="email"], input[type="url"], input[type="number"], input[type="date"], input[type="search"], select, textarea, .wf-input, .wf-select, .pm-select, .sfield-city { font-size: 16px !important; } /* Topbar tier & account pills: >=40px tap height without wrapping onto a 3rd row */ .topbar .plan-pill, .topbar .nav-account-pill { min-height: 40px !important; padding: 6px 12px !important; display: inline-flex !important; align-items: center !important; box-sizing: border-box !important; } /* Omnibar interactive fields & Explore steppers: >=40px tap target */ .spotlight-omnibar .omni-field { padding-top: 6px !important; padding-bottom: 6px !important; } .spotlight-omnibar .omni-field > .sfield, .discover-bar .sfield.d-month, .discover-bar .sfield.sfield-city, .discover-bar .sfield.sfield-cur { min-height: 40px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } .stepper .stepper-btn { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } /* Date-range picker presets & cells: >=40px tap height */ .dr-presets button { min-height: 40px !important; padding: 6px 12px !important; } .dr-grid .drday { min-height: 40px !important; } /* Result cards & My Trips action buttons: >=40px tap height */ .hcard .dc-arrow { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } .hcard .c-act .calbtn { min-height: 44px !important; } .wt-actions .wt-act { min-height: 42px !important; } } /* ========================================================================== Pass-2 Compare flow (2026-10-29): date picker, filters, result cards. Dark-Titanium: graphite #08090c / #13161d, gold #c8a25a. Appended last so it wins the earlier mobile !important layers without touching them. ========================================================================== */ /* Date picker: the selected range uses the brand gold, not the system blue. */ html body .dr-popover .drday.start, html body .dr-popover .drday.end, html body .dr-popover .drday.single { background: #c8a25a !important; color: #08090c !important; font-weight: 700 !important; } html body .dr-popover .drday.inrange { background: rgba(200, 162, 90, 0.16) !important; color: #f5f7fa !important; } html body .dr-popover .drday:focus-visible, html body .dr-popover .dr-head button:focus-visible { outline: 2px solid #c8a25a !important; outline-offset: 2px !important; } html body .dr-popover .dr-head button:disabled { opacity: 0.35 !important; cursor: not-allowed !important; } @media (max-width: 720px) { /* Date picker: month arrows 44px, presets 40px (were 38px / 34px). */ html body .dr-popover .dr-head #drPrev, html body .dr-popover .dr-head #drNext { width: 44px !important; height: 44px !important; min-width: 44px !important; min-height: 44px !important; } html body .dr-popover .dr-head .dr-presets button { height: 40px !important; min-height: 40px !important; font-size: 13px !important; } /* Compare filters: number inputs and the min-value trigger 44px tall, 16px text so iOS never zooms into the field. */ html body .filterrow .chip.chip-input input[type="number"], html body .filterrow .chip.chip-select .ipf-select-wrap, html body .filterrow .chip.chip-select .ipf-select-trigger, html body #minValCatBtn { height: 44px !important; min-height: 44px !important; font-size: 16px !important; } html body .filterrow label.chip { min-height: 44px !important; } /* Result cards: photo arrows, city-chip remove, IHG link, sort options. */ html body .cards .dc-arrow, html body #bestValue .dc-arrow, html body .hcard .dc-arrow { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; } html body .dest-chip .dest-x { width: 40px !important; height: 40px !important; min-width: 40px !important; margin: -8px -10px -8px 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; } html body #bestValue .bv-ihg { display: flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; } html body #sortSelPanel .cur-item { min-height: 44px !important; } /* The Points.com pill stays visually compact; its hit area grows to 40px. */ html body .c-arb-pill { position: relative !important; } html body .c-arb-pill::after { content: "" !important; position: absolute !important; inset: -9px -4px !important; } } /* Pass-2 Compare follow-up (2026-10-29): the 44px month arrows need a narrower label basis so the header stays on one row; recovery city chips reach 44px on phones. */ @media (max-width: 720px) { html body .dr-popover .dr-head > span { flex: 1 1 calc(100% - 120px) !important; min-width: 0 !important; } html body .rec-city { min-height: 44px !important; } } /* Pass-3 Hotel View (2026-10-29): hotel header, gallery lightbox, stays and date-picker leftovers. Tap targets reach 40-44px on phones, the lightbox close button is 40px everywhere, the stage owns horizontal swipes, and the date-picker month is named once (by the calendar titles). */ html body .dr-popover #drLabel { position: absolute !important; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; flex: none !important; } html body #hotelLightbox .lb-close { width: 40px !important; height: 40px !important; } html body #hotelLightbox .lb-stage { touch-action: pan-y; } html body #hotelLightbox .lb-img { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; } @media (max-width: 720px) { html body #hotelView #backBtn { min-height: 44px !important; } html body #hotelView .pa-link { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 44px !important; } html body #hotelView #stays .stay-link { min-height: 40px !important; } } /* Pass-3 accent + filter leftovers (2026-10-29). --accent is now the Dark-Titanium gold (#c8a25a, 8.5:1 on #08090c). Surfaces that paint the accent as a FILL switch their ink to graphite so text and ticks stay legible (white on gold is only 2.3:1). */ html body .chip input[type="checkbox"]:checked { background-color: var(--accent) !important; border-color: var(--accent) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 10px 8px; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 8'%3E%3Cpath d='M1 4l3 3 5-6' fill='none' stroke='%2308090c' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } html body .notif-browser[aria-pressed="true"] { color: #08090c !important; } html body .drday.start, html body .drday.end, html body .drday.single { color: #08090c !important; } html body .filterrow label.chip:has(#rewardOnly:focus-visible) { box-shadow: var(--focus-ring) !important; } html body #rewardOnly:focus-visible { outline: none !important; } @media (max-width: 720px) { /* #rewardOnly: the checkbox itself is a 44px hit box (10px transparent border around a 24px visible disc), inside a 44px-tall chip. */ html body .filterrow label.chip:has(#rewardOnly) { min-height: 44px !important; } html body #rewardOnly { box-sizing: border-box !important; width: 44px !important; height: 44px !important; min-width: 44px !important; margin: -10px -4px -10px -14px !important; border: 10px solid transparent !important; background-clip: padding-box !important; background-origin: padding-box !important; background-size: 12px 10px !important; box-shadow: inset 0 0 0 1px var(--neutral-4) !important; } html body #rewardOnly:checked { box-shadow: inset 0 0 0 1px var(--accent) !important; } } /* Pass-5 My Trips + toasts + #rewardOnly (2026-10-29). H1: the pricing paywall (.pm-backdrop 250 / .pm-modal 251) now sits ABOVE the Rate Watch and Guardian sheets (.sheet-backdrop 210 / .sheet 211) and below the confirm dialog (300) and the account modal (9600), so a quota hit from "Track this booking" is visible on top of the sheet. */ html body .toast { width: max-content; max-width: min(92vw, 440px); border-radius: 14px; text-align: left; line-height: 1.4; padding: 12px 14px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 130; overflow-wrap: anywhere; } html body .toast.has-action { flex-wrap: nowrap; gap: 12px; } html body .toast-action { flex: none; min-height: 44px; min-width: 64px; margin-left: auto; padding: 0 10px; } /* The floating back-to-top button steps aside while a toast is up. */ html body.toast-visible .back-to-top { opacity: 0 !important; pointer-events: none !important; } /* M9: the card a Needs attention jump lands on is visibly focused. */ html body .wt-card:focus-visible, html body .wt-card.is-jump-target { outline: none; box-shadow: 0 0 0 2px #08090c, 0 0 0 4px #c8a25a !important; } html body .wt-card.is-jump-target { animation: ipf-jump-pulse 1.5s ease-out 1; } @keyframes ipf-jump-pulse { 0% { box-shadow: 0 0 0 2px #08090c, 0 0 0 10px rgba(200, 162, 90, 0.55); } 100% { box-shadow: 0 0 0 2px #08090c, 0 0 0 4px #c8a25a; } } @media (prefers-reduced-motion: reduce) { html body .wt-card.is-jump-target { animation: none; } } /* M2: the watch sheet error is readable, and the clamp hint is quiet. */ html body .sheet .sheet-error { font-size: 13.5px; line-height: 1.45; } html body .sheet .wf-hint { margin: 6px 0 0; font-size: 12.5px; color: var(--text-2, #a1a1aa); } html body .sheet .wf-sep { font-size: 13px; color: var(--text-3, #8e8e93); } /* M5: the danger confirm button meets AA (white on #b3261e = 6.5:1) on every viewport. */ html body .ipf-confirm-ok.danger { background: #b3261e !important; border-color: #b3261e !important; color: #ffffff !important; } html body .ipf-confirm-ok.danger:hover { background: #c62828 !important; border-color: #c62828 !important; } /* L7: the referral card uses the Titanium card surface, not navy. */ html body .ipf-referral-card { background: #13161d !important; border-color: rgba(200, 162, 90, 0.45) !important; } @media (max-width: 720px) { /* H2: Cancel and Save stay pinned at the bottom of the sheet while the form scrolls under them (.sheet remains the scroller). */ html body .sheet .sheet-foot { position: sticky !important; bottom: 0; z-index: 2; margin: 4px -14px calc(-28px - env(safe-area-inset-bottom, 0px)) !important; padding: 12px 14px calc(12px + env(safe-area-inset-bottom, 0px)) !important; width: auto !important; background: linear-gradient(to top, #1c1c1e 78%, rgba(28, 28, 30, 0)); box-sizing: border-box; } /* H4: "Reward available only" is a full-width 44px row, checkbox at the left and the label on one line; it no longer stretches to the height of the stacked "Max cash/night" cell beside it. */ html body .filterrow.toplevel label.chip:has(#rewardOnly) { grid-column: 1 / -1 !important; flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: center !important; align-self: start !important; gap: 10px !important; min-height: 44px !important; height: auto !important; white-space: nowrap !important; } html body .filterrow.toplevel .filter-reset-btn { grid-column: 1 / -1 !important; } /* M7: My Trips and paywall tap targets reach 44px on phones. */ html body #monStrip .mon-actions .btn-ghost, html body .ipf-referral-card a[target="_blank"] { min-height: 44px !important; display: inline-flex !important; align-items: center !important; } html body .pm-close { width: 44px !important; height: 44px !important; } html body .pm-billing-btn { min-height: 44px !important; } html body .pm-slider { height: 32px; } html body .pm-fnf { font-size: 13px; } html body .pm-fnf input { width: 20px; height: 20px; } } /* ========================================================================== Pass-6 pricing, topbar, badges (2026-10-29). Dark-Titanium #08090c / #13161d / gold #c8a25a. Appended last so it wins the earlier layers. ========================================================================== */ /* Pricing: the close control stays pinned while the tall modal scrolls, is at least 40px on desktop (44px on phones) and every plan CTA is 44px tall. */ html body .pm-shell > .pm-close { position: sticky !important; top: 12px; right: auto; display: flex !important; margin: -14px -16px -40px auto; width: 40px; height: 40px; z-index: 6; background: rgba(19, 22, 29, 0.92); border-color: rgba(200, 162, 90, 0.38); color: #e6c784; font-size: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5); } html body .pm-shell > .pm-close:focus-visible { outline: none; box-shadow: 0 0 0 2px #08090c, 0 0 0 4px #c8a25a; } html body .pm-cta { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } html body .pm-context { padding-right: 52px; } @media (max-width: 768px) { html body .pm-shell > .pm-close { width: 44px !important; height: 44px !important; margin: -12px -6px -44px auto; top: 10px; } html body .pm-context { padding-right: 0; } html body .pm-kicker { padding-right: 44px; display: block; } } /* M6 (tier colours): every tier badge matches its legend tile and its value number. All three read the same --tier-* tokens. Great blue is #3b9cff so the badge text keeps >= 4.5:1 on the dark card surfaces. */ html body .vbadge.LOW { color: var(--tier-poor-text); background: var(--tier-poor-bg); border-color: var(--tier-poor-border); } html body .vbadge.NORMAL { color: var(--tier-fair-text); background: var(--tier-fair-bg); border-color: var(--tier-fair-border); } html body .vbadge.HIGH { color: var(--tier-great-text); background: var(--tier-great-bg); border-color: var(--tier-great-border); } html body .vbadge.EXTREMELY_HIGH { color: var(--tier-exceptional-text); background: var(--tier-exceptional-bg); border-color: var(--tier-exceptional-border); } /* M8: Points Guardian actions on phones. Review leads full width, the rest pair up two per row, a trailing odd action (Delete) spans the row, and the "View rates on IHG" link looks and sizes like its sibling buttons. */ @media (max-width: 640px) { html body .wt-card[data-kind="guardian"] .wt-actions { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body .wt-card[data-kind="guardian"] .wt-actions > .wt-act[data-gact="review"], html body .wt-card[data-kind="guardian"] .wt-actions > .wt-act:last-child:nth-child(even) { grid-column: 1 / -1 !important; } html body .wt-card[data-kind="guardian"] .wt-actions > .wt-act { min-height: 44px !important; height: auto !important; margin: 0 !important; } /* Every action reads as the same tile, the IHG link included. */ html body .wt-card[data-kind="guardian"] .wt-actions > button.wt-act, html body .wt-card[data-kind="guardian"] .wt-actions > a.wt-act { text-decoration: none !important; color: #e6e9ef !important; background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 10px !important; font-weight: 600 !important; } html body .wt-card[data-kind="guardian"] .wt-actions > .wt-act.danger { color: #ff6b6b !important; border-color: rgba(255, 107, 107, 0.35) !important; background: rgba(255, 107, 107, 0.06) !important; } } /* M4: compact phone topbar. Brand, plan pill and Sign In share one row and the section switcher sits below it (110px instead of 162px). While scrolling down, topbar-compact.js slides the brand row away with a transform so only the switcher stays pinned. */ @media (max-width: 560px) { html body header.topbar { flex-wrap: wrap !important; align-items: center !important; gap: 6px 6px !important; padding: 6px 8px 6px 12px !important; height: auto !important; transition: transform .22s ease; will-change: transform; } html body header.topbar .brand { flex: 1 1 0 !important; min-width: 0 !important; gap: 8px !important; order: 1; } html body header.topbar .brand .brand-name { font-size: 15px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; min-width: 0; } html body header.topbar .brand .logo { width: 28px !important; height: 28px !important; flex: 0 0 28px; } html body header.topbar .topnav { order: 2; margin-left: auto !important; flex: 0 0 auto !important; flex-wrap: nowrap !important; gap: 6px !important; width: auto !important; justify-content: flex-end !important; } html body header.topbar .plan-pill, html body header.topbar .nav-account-pill { min-height: 40px !important; padding: 6px 11px !important; font-size: 13px !important; white-space: nowrap !important; } html body header.topbar .plan-pill[data-tier="FREE_EXPLORER"] #planPillLabel, html body header.topbar .plan-pill[data-tier="FREE_EXPLORER"] .plan-pill-sep { display: none !important; } html body header.topbar .plan-pill:not([data-tier="FREE_EXPLORER"]) #planPillAction, html body header.topbar .plan-pill:not([data-tier="FREE_EXPLORER"]) .plan-pill-sep { display: none !important; } html body header.topbar .plan-pill #planPillLabel { max-width: 110px; overflow: hidden; text-overflow: ellipsis; } html body header.topbar .nav-account-pill #navAccountLabel { max-width: 84px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } html body header.topbar .navswitch { order: 3 !important; width: 100% !important; flex: 1 1 100% !important; padding-top: 2px !important; padding-bottom: 2px !important; } html body header.topbar .brand, html body header.topbar .topnav { transition: opacity .18s ease; } html body.topbar-collapsed header.topbar { transform: translateY(var(--topbar-collapse, -52px)); } html body.topbar-collapsed header.topbar .brand, html body.topbar-collapsed header.topbar .topnav { opacity: 0; pointer-events: none; } } @media (max-width: 560px) and (prefers-reduced-motion: reduce) { html body header.topbar, html body header.topbar .brand, html body header.topbar .topnav { transition: none !important; } } @media (max-width: 560px) { html body header.topbar .plan-pill[data-tier="FREE_EXPLORER"] #planPillAction { display: inline !important; } html body header.topbar .plan-pill:not([data-tier="FREE_EXPLORER"]) #planPillLabel { display: inline-block !important; } } @media (max-width: 374px) { html body header.topbar { padding: 6px 8px 6px 10px !important; gap: 6px 5px !important; } html body header.topbar .brand { gap: 6px !important; } html body header.topbar .brand .brand-name { font-size: 14px !important; letter-spacing: -0.01em; } html body header.topbar .topnav { gap: 5px !important; } html body header.topbar .plan-pill, html body header.topbar .nav-account-pill { padding: 6px 9px !important; } } /* ========================================================================== Pass-7 Explore and footer (2026-10-29). Dark-Titanium #08090c / #13161d / gold #c8a25a. 44px Filters disclosure, 40px footer links on phones, and a 16px hidden month input so iOS never zooms if it receives focus. ========================================================================== */ html body #discoverView .d-advanced > summary { min-height: 44px; display: flex; align-items: center; box-sizing: border-box; } html body #dMonth.d-month-native { font-size: 16px; } @media (max-width: 640px) { html body .app-footer-meta > a, html body .app-footer-legal-links a { display: inline-flex; align-items: center; min-height: 40px; box-sizing: border-box; } html body .app-footer-legal-links { column-gap: 16px; row-gap: 0; } } /* Pass-7b (2026-10-29): Explore result cards. "Track this opportunity" and "View rates on IHG" were 19px-tall text links on phones; the currency dropdown rows were 39px. Lift both to the 40px+ tap floor. */ @media (max-width: 640px) { html body #dResults .d-link { display: inline-flex; align-items: center; min-height: 40px; padding: 0 2px; box-sizing: border-box; } html body #dResults .d-links { gap: 2px; } html body .cur-item[role="option"] { min-height: 44px; } } /* Pass 8 (desktop/tablet parity + a11y) */ /* Tablet portrait: the 8/4 bento squeezed the calendar to ~460px and cut "€59/10k" to "€59/1". Stack the calendar and the peak card instead. */ @media (min-width: 641px) and (max-width: 900px) { .hotel-bento { grid-template-columns: minmax(0, 1fr); gap: 16px; } .hotel-bento .calendar-card, .hotel-bento .peak-card { grid-column: 1 / -1; } .hotel-bento .peak-card { position: static; } } /* The active nav tab and active segment set their own box-shadow, which hid the keyboard focus ring. An outline survives any box-shadow. */ .topnav .navlink:focus-visible, .navlink.active:focus-visible, .navlink[aria-current="page"]:focus-visible, .seg-item.active:focus-visible { outline: 2px solid #c8a25a; outline-offset: 2px; } @media (max-width: 600px) { .skip-link { min-height: 44px; display: inline-flex; align-items: center; } .teach-how > summary { display: flex; align-items: center; min-height: 40px; } .pm-advanced > summary { display: flex; align-items: center; min-height: 40px; } html body .pm-slider { height: 40px; } } /* Readability (Leo, user feedback 2026-10-29): the "Your stay" strip header and its small grey labels were too faint and small next to the big values. */ html body .stay-sum-head { font-size: 14px; letter-spacing: 0.03em; font-weight: 700; color: #e8ecf2; margin-bottom: 6px; } html body .srs-label { font-size: 12.5px; letter-spacing: 0.04em; color: var(--text-2); } html body .srs-sub { font-size: 13px; color: #d3d9e2; } html body .stay-note { font-size: 13px; color: var(--text-2); } /* Signup copy: room for the longer 'Get free alerts' label on phones. */ @media (max-width: 600px) { html body header.topbar .nav-account-pill #navAccountLabel { max-width: 112px; } } /* Signup round (2026-10-29): Compare free-alert prompt for signed-out visitors. Same graphite card surface as .hcard, one champagne-gold accent edge. */ .compare-alert { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 14px 48px 14px 18px; border-radius: 18px; background: linear-gradient(180deg, #191b1f 0%, #15171a 100%); border: 1px solid #2b2f36; border-left: 3px solid var(--gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } .compare-alert .ca-text { flex: 1 1 auto; min-width: 0; } .compare-alert .ca-head { margin: 0; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--text); } .compare-alert .ca-sub { margin: 4px 0 0; font-size: 13px; line-height: 1.4; color: var(--text-2); } .compare-alert .ca-cta { flex: 0 0 auto; min-height: 40px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--accent); color: #0b0b0d; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background-color 180ms ease; } .compare-alert .ca-cta:hover { background: var(--accent-hover); } .compare-alert .ca-cta:focus-visible, .compare-alert .ca-x:focus-visible { outline: none; box-shadow: var(--focus-ring); } .compare-alert .ca-x { position: absolute; top: 6px; right: 6px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); font-size: 20px; line-height: 1; cursor: pointer; } .compare-alert .ca-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); } /* Sits right under the results summary line, above the first result. */ .resultmeta + .compare-alert { margin: 0 0 12px; } #resultMeta[hidden] + .compare-alert { display: none; } @media (max-width: 560px) { .compare-alert { flex-wrap: wrap; padding: 14px 44px 14px 16px; } .compare-alert .ca-cta { width: 100%; } } /* Founder dashboard: Signups by source */ .ipf-admin-sources { margin-bottom: 18px; } .ipf-admin-sources-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .ipf-admin-sources-head .ipf-admin-bento-title { margin: 0; } .ipf-admin-sources-table { font-size: 12.5px; } .ipf-admin-sources-table .ipf-admin-sources-num { text-align: right; font-variant-numeric: tabular-nums; } .ipf-admin-sources-table tfoot td { border-top: 1px solid rgba(229, 193, 120, 0.35); color: #e5c178; } .ipf-admin-sources-card > .ipf-admin-sub { margin: 8px 0 0; } /* Compare over the hero photo (2026-10-29): the results summary line and the whole filter bar read in near-white #f1f5f9 at full opacity, about 1.5px bigger, with a soft shadow so they hold 4.5:1 over the photo scrim. Counts stay a touch dimmer. The active 4th Night Free keeps its champagne state. */ html body #resultMeta .meta-sub { color: #f1f5f9; opacity: 1; font-size: 16px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 12px rgba(0, 0, 0, 0.45); } html body #filters .filterrow .chip, html body #filters .filterrow .fnf-toggle:not([aria-pressed="true"]), html body #filters .filterrow .filter-reset-btn, html body #filters .filters-toggle, html body #filters .tierchip .tiername, html body .teach-how > summary { color: #f1f5f9 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); } html body #filters .filterrow .chip { font-size: 14.5px !important; } html body #filters .filterrow .fnf-toggle, html body #filters .filterrow .filter-reset-btn { font-size: 13.5px !important; } html body #filters .filterrow .chip.chip-input input[type="number"], html body #filters .filterrow .chip .filter-select, html body #filters .filterrow .chip.chip-select .ipf-select-trigger { color: #f1f5f9 !important; font-size: 14px !important; } html body #filters .filterrow .chip.chip-input input[type="number"]::placeholder { color: #cbd5e1; opacity: 1; } html body #filters .tierchip .tiername { font-size: 13.5px; } html body #filters .tierchip .tiercount { font-size: 12.5px; color: rgba(241, 245, 249, 0.8); } html body .teach-how > summary { font-size: 14px; } @media (max-width: 600px) { html body #filters .filterrow .chip, html body #filters .filterrow .chip.chip-input, html body #filters .filterrow .chip.chip-select { font-size: 13.5px !important; } html body #filters .filterrow .chip.chip-input input[type="number"], html body #filters .filterrow .chip.chip-select .ipf-select-trigger { font-size: 13.5px !important; } } /* 2026-10-29: best-value answer box, tightened. The value and its unit sit on one baseline row like the Compare cards; the tier badge and the delta line stack under it with 6px gaps; View stay follows 16px below the delta instead of being pushed to the bottom (the column centres its content when the card is taller); View rates on IHG is a compact secondary link 8px under it. */ html body #bestValue.bv-card-3col .bv-side, html body #bestValue.bv-card-3col .bv-verdict-col { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; } html body #bestValue.bv-card-3col .bv-side .bv-fig { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; row-gap: 6px; min-width: 0; } html body #bestValue.bv-card-3col .bv-side .bv-fig > .bv-value { grid-column: 1; } html body #bestValue.bv-card-3col .bv-side .bv-fig > .bv-unit { grid-column: 2; font-size: 14px; white-space: nowrap; } html body #bestValue.bv-card-3col .bv-side .bv-fig > :not(.bv-value):not(.bv-unit) { grid-column: 1 / -1; justify-self: start; margin: 0; } html body #bestValue.bv-card-3col .bv-side .bv-cta { width: 100%; min-width: 0; margin: 16px 0 0; } html body #bestValue.bv-card-3col .bv-side .bv-ihg { display: block !important; min-height: 0 !important; margin: 8px auto 0; padding: 4px 8px; font-size: 12.5px; line-height: 1.3; text-align: center; align-self: center; } /* Compare card value box (Leo, 2026-10-30): no hairlines between the value box and the action, and the verdict, figure, badge, sentence and button all share one left edge. Phones (<=480px) keep the full-width button. */ .hcard .c-value, .hcard .c-foot { border-left: 0; border-top: 0; } @media (min-width: 861px) { .hcard .c-value { padding: 22px 22px 6px; gap: 8px; } .hcard .c-foot { padding: 10px 22px 20px; } .hcard .c-act { align-self: flex-start; } } @media (min-width: 481px) and (max-width: 860px) { .hcard .c-value { padding-bottom: 4px; } .hcard .c-foot { justify-content: flex-start; } .hcard .c-act { margin-left: 0; } } /* SEO 2026-10-30: homepage H1 eyebrow and the static intro under the search box. */ .hero-title-kicker { display: block; margin-bottom: 0.4em; font-size: clamp(12px, 0.34em, 19px); font-weight: 650; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; color: #c8a25a; -webkit-text-fill-color: #c8a25a; } .hero-title-main { display: block; } .hero-title-main::first-letter { text-transform: uppercase; } .home-seo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; max-width: 100%; margin: 56px 0 0; padding: 28px 0 0; border-top: 1px solid rgba(255, 255, 255, 0.08); } .home-seo-block { min-width: 0; } .home-seo-block h2 { margin: 0 0 10px; color: #f1f5f9; font-size: 18px; font-weight: 640; letter-spacing: -0.015em; line-height: 1.3; } .home-seo-block p { margin: 0; color: #b8c2d0; font-size: 15px; line-height: 1.65; overflow-wrap: break-word; } .home-seo-block p + p { margin-top: 8px; } .home-seo a { color: #f1f5f9; text-decoration: underline; text-decoration-color: rgba(200, 162, 90, 0.6); text-underline-offset: 3px; } .home-seo a:hover { color: #c8a25a; } #searchView.has-results .home-seo { display: none; } @media (max-width: 720px) { .home-seo { grid-template-columns: 1fr; gap: 22px; margin-top: 40px; padding-top: 22px; } .home-seo-block h2 { font-size: 17px; } .home-seo-block p { font-size: 14.5px; } } /* SEO 2026-10-31: these app titles moved from h2 to div/p so the page H1 is the * first heading. The rules below copy what the old h2 selectors gave them, so * they look exactly as before. */ .hero-title, .wt-title, .pm-headline, .d-empty-title, .wt-empty-title, .shortcuts-title { text-wrap: balance; } .wt-empty .wt-empty-title, .wt-empty .d-empty-title { font-size: var(--fs-section); font-weight: 700; letter-spacing: -0.02em; } .wt-empty.d-empty .d-empty-title { font-size: 22px; font-weight: 650; letter-spacing: -0.02em; } .shortcuts-dialog .shortcuts-title { margin: 0; color: var(--text); font-size: 20px; font-weight: 700; letter-spacing: -0.02em; } .home-seo-links { margin: 0; padding-left: 1.15em; color: #b8c2d0; font-size: 15px; line-height: 1.65; } .home-seo-links li + li { margin-top: 2px; } @media (max-width: 720px) { .home-seo-links { font-size: 14.5px; } }