/* Fraunces (warm editorial serif for headings/brand moments - 2026-09-01 visual refresh, chosen to read as "premium travel" rather than "generic SaaS dashboard") + Inter (UI text/body copy) are loaded via tags in templates/base.html's , not @import here - a lets the browser discover and fetch the font in parallel with this stylesheet instead of blocking on it. */ :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; /* A fixed height (not min-height) is required so flex children with min-height:0 (like .content-flush / .chat-messages) get a bounded box to shrink into and scroll internally - min-height alone lets body grow past one viewport instead, which is what let the chat page's input bar drift off-screen below a long conversation. 100dvh accounts for mobile browser chrome; a min-height:100vh fallback keeps very short/legacy content pages filling the screen even in browsers without dvh support. */ 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 { font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; color: var(--color-primary-dark); text-decoration: none; margin-right: auto; letter-spacing: -0.01em; } .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; } .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; } @media (max-width: 640px) { .nav-toggle { display: flex; } .site-nav { display: none; width: 100%; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-top: 0.75rem; } .site-header-inner { flex-wrap: wrap; } .site-nav.is-open { display: flex; } } /* 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; } /* Page content */ .site-content { flex: 1 1 auto; width: 100%; max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; } /* Used by pages that manage their own full-height layout with an internally-scrolling region (e.g. /chat/'s .chat-messages) - grows to fill the space left by the header/footer like .site-content, but without imposing padding/max-width of its own. min-height:0 is required here so the flex child can be squeezed to exactly one viewport's worth of space, letting its own internal overflow:auto region absorb anything taller - never use this class for a page without such a region (see .content-wide below for why: found live, 2026-09-01, on production - the landing page reused this class before it had any internal scroll area, which silently capped
at a flex-computed height shorter than its actual content and caused the footer to render on top of the overflowing destinations section instead of below it). */ .content-flush { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } /* Used by full-width pages that are simply taller than one viewport and should scroll normally (e.g. the landing page) - same flush styling as .content-flush (no padding/max-width imposed) but without min-height:0, so
is free to grow to its full content height instead of being capped to the flex-computed 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; } /* Checkbox/radio option lists (e.g. CheckboxSelectMultiple) render as a plain