/* Fraunces (headings/brand moments - reads as "premium travel", not generic SaaS) and Inter (UI/body text) load via tags in base.html's , not @import here, so the browser can fetch the fonts and this stylesheet in parallel instead of blocking on one. */ :root { --color-primary: #1d6f6a; --color-primary-dark: #14514d; --color-primary-light: #e4f0ee; --color-accent: #c96f3e; --color-accent-dark: #a8582e; --color-accent-light: #fbeee5; --color-bg: #f7f8fa; --color-surface: #ffffff; --color-sand: #fbf8f3; --color-text: #1f2933; --color-text-muted: #5a6572; --color-border: #dde2e7; --color-success-bg: #e3f6e8; --color-success-text: #1e6b3a; --color-error-bg: #fdeceb; --color-error-text: #a4302a; --color-warning-bg: #fff5e0; --color-warning-text: #8a5a00; --color-info-bg: #e8f0fe; --color-info-text: #1c4587; --color-danger: #b3392f; --radius: 0.65rem; --radius-lg: 1.15rem; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(31, 41, 51, 0.06), 0 1px 1px rgba(31, 41, 51, 0.04); --shadow-md: 0 8px 24px rgba(31, 41, 51, 0.08), 0 2px 6px rgba(31, 41, 51, 0.05); --shadow-lg: 0 20px 48px rgba(31, 41, 51, 0.12), 0 6px 16px rgba(31, 41, 51, 0.06); --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-display: "Fraunces", Georgia, "Times New Roman", serif; } * { box-sizing: border-box; } body { margin: 0; font-family: var(--font-sans); color: var(--color-text); background: var(--color-bg); display: flex; flex-direction: column; /* Fixed height, not min-height: flex children with min-height:0 (like .content-flush / .chat-messages) need a bounded box to shrink into and scroll inside - min-height alone lets body grow past one viewport instead, which used to let the chat input drift off-screen below a long conversation. 100dvh handles mobile browser chrome; the min-height:100vh fallback keeps short/legacy pages filling the screen where dvh isn't supported. */ min-height: 100vh; height: 100dvh; } h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.2; color: var(--color-text); letter-spacing: -0.01em; } h1 { font-size: 1.9rem; margin: 0 0 0.6rem; } h2 { font-size: 1.35rem; margin: 1.75rem 0 0.75rem; } p { line-height: 1.6; } a { color: var(--color-primary); } a:hover { color: var(--color-primary-dark); } /* Header / nav */ .site-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .site-header-inner { max-width: 760px; margin: 0 auto; padding: 0.85rem 1rem; display: flex; align-items: center; gap: 1rem; } .brand { display: flex; align-items: center; text-decoration: none; margin-right: auto; } .brand img { height: 48px; width: auto; display: block; } .site-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; } .site-nav a { text-decoration: none; color: var(--color-text-muted); font-size: 0.95rem; } .site-nav a:hover { color: var(--color-primary); } .nav-logout-form { margin: 0; } .lang-switcher { margin: 0; } .lang-switcher select { font: inherit; font-size: 0.9rem; color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.3rem 0.5rem; cursor: pointer; } .lang-switcher select:hover { color: var(--color-primary); border-color: var(--color-primary); } .link-button { background: none; border: none; padding: 0; font: inherit; color: var(--color-text-muted); cursor: pointer; text-decoration: underline; } .link-button:hover { color: var(--color-primary); } .nav-toggle { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 4px; background: none; border: 1px solid var(--color-border); border-radius: var(--radius); width: 2.25rem; height: 2.25rem; padding: 0; cursor: pointer; } .nav-toggle span { display: block; width: 1.1rem; height: 2px; background: var(--color-text); border-radius: 1px; } .site-nav-backdrop { display: none; } @media (max-width: 640px) { .nav-toggle { display: flex; } /* Overlays the page instead of pushing content down like it used to. Stays display: flex at all times so the transform can actually animate; position: fixed pulls it out of the header's flow entirely, so it never affects .site-header-inner's layout. */ .site-nav { position: fixed; top: 0; left: 0; bottom: 0; z-index: 50; width: 80%; max-width: 300px; margin: 0; background: var(--color-surface); box-shadow: var(--shadow-lg); flex-direction: column; align-items: flex-start; gap: 1rem; padding: 4.5rem 1.5rem 1.5rem; overflow-y: auto; transform: translateX(-100%); transition: transform 0.2s ease; } .site-nav.is-open { transform: translateX(0); } .site-nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(31, 41, 51, 0.45); z-index: 49; } .site-nav-backdrop.is-open { display: block; } } /* Messages */ .messages { list-style: none; margin: 0 auto; padding: 0.75rem 1rem 0; max-width: 760px; display: flex; flex-direction: column; gap: 0.5rem; } .message { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.65rem 0.9rem; border-radius: var(--radius); font-size: 0.95rem; background: var(--color-info-bg); color: var(--color-info-text); } .message.success { background: var(--color-success-bg); color: var(--color-success-text); } .message.error { background: var(--color-error-bg); color: var(--color-error-text); } .message.warning { background: var(--color-warning-bg); color: var(--color-warning-text); } .message-close { background: none; border: none; font-size: 1rem; line-height: 1; cursor: pointer; color: inherit; opacity: 0.6; } .message-close:hover { opacity: 1; } /* Permanent, non-dismissible - same reasoning as the usage-data footer note. "In beta" stays true the whole time it's shown, so letting people dismiss it would just mean most never see it again. */ .beta-banner { background: var(--color-info-bg); color: var(--color-info-text); text-align: center; font-size: 0.85rem; padding: 0.45rem 1rem; } /* Styled like an info-level .message rather than a modal - it's a soft "want to switch?" nudge, never a forced interruption. Starts [hidden] in the markup (base.html); JS only reveals it once sessionStorage confirms it wasn't already dismissed this session - see static/js/main.js. */ .language-suggestion { max-width: 760px; margin: 0.75rem auto 0; padding: 0.65rem 0.9rem; border-radius: var(--radius); background: var(--color-info-bg); color: var(--color-info-text); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.95rem; } /* [hidden] alone loses to our display: flex above (same specificity, loads later) - this override keeps it actually hidden until JS reveals it. */ .language-suggestion[hidden] { display: none; } .language-suggestion-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } .language-suggestion-switch { background: var(--color-info-text); color: var(--color-surface); border: none; border-radius: var(--radius-pill); padding: 0.35rem 0.9rem; font-size: 0.85rem; font-weight: 600; cursor: pointer; } .language-suggestion-switch:hover { opacity: 0.9; } .language-suggestion-dismiss { background: none; border: none; color: inherit; opacity: 0.75; font-size: 0.85rem; cursor: pointer; text-decoration: underline; } .language-suggestion-dismiss:hover { opacity: 1; } /* Page content */ .site-content { flex: 1 1 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; } /* For pages with their own internally-scrolling region (e.g. /chat/'s .chat-messages) - fills the space left by the header/footer like .site-content, but skips its padding/max-width. min-height:0 lets the flex child get squeezed down to one viewport's worth of space, so its own overflow:auto can absorb the rest. Don't reach for this on a page without that scroll region: the landing page tried it once before it had one, and
got silently capped shorter than its actual content, pushing the footer up over the destinations section instead of below it - see .content-wide instead. */ .content-flush { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* For full-width pages that are just taller than one viewport and should scroll normally (the landing page) - same flush styling as .content-flush but without min-height:0, so
is free to grow to its full content height instead of getting capped to the space left by the header/footer. */ .content-wide { flex: 1 1 auto; display: flex; flex-direction: column; } /* Forms - targets the default {{ form.as_p }} output, no per-template markup needed */ form p { margin: 0 0 1rem; display: flex; flex-direction: column; gap: 0.3rem; } form label { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); } input, select, textarea { font: inherit; padding: 0.55rem 0.7rem; border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); } input:focus, select:focus, textarea:focus { outline: 2px solid var(--color-primary); outline-offset: 1px; } textarea { resize: vertical; min-height: 4.5rem; } /* CheckboxSelectMultiple etc. render as a plain