/* ────────────────────────────────────────── Stayant Public Site — site.css ────────────────────────────────────────── */ /* ── CSS Variables (tenant override-able via Layout) ── */ :root { --color-primary: #2563eb; --color-primary-dk: #1d4ed8; --color-accent: #f59e0b; --color-bg: #ffffff; --color-surface: #f8fafc; --color-card: #ffffff; --color-text: #1e293b; --color-muted: #64748b; --color-border: #e2e8f0; --color-nav-bg: #ffffff; --color-nav-text: #1e293b; --color-footer-bg: #1e293b; --color-footer-text: #cbd5e1; --radius-card: 1rem; --shadow-card: 0 4px 24px rgba(0,0,0,.08); --shadow-card-hover: 0 12px 36px rgba(0,0,0,.14); --transition: .25s cubic-bezier(.4,0,.2,1); --nav-height: 72px; --ws-font-body: 'Inter', system-ui, -apple-system, sans-serif; --ws-font-heading: var(--ws-font-body); --ws-radius-btn: .375rem; --ws-section-pad: 3rem; --color-on-primary: #ffffff; } /* ── Dark mode ─────────────────────────────────────────────────────────────── Auto-driven by the visitor's OS preference. Two selectors keep both paths working: • [data-bs-theme="dark"] — set on by the inline matchMedia script in _Layout (this is what also flips Bootstrap's own components to dark). • @media (prefers-color-scheme: dark) — no-JS fallback so our custom components still darken even if the script doesn't run. Only the *neutral* tokens flip here (bg / surface / card / text / borders + the nav/footer DEFAULTS). Brand tokens (--color-primary / --color-accent) are left untouched, and a tenant's chosen nav/footer colours still win because _Layout injects them in a later inline :root{} block of equal specificity — so dark mode darkens the neutrals while keeping the tenant's brand. */ [data-bs-theme="dark"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-card: #243348; --color-text: #e2e8f0; --color-muted: #94a3b8; --color-border: #334155; --color-nav-bg: #1e293b; --color-nav-text: #e2e8f0; --color-footer-bg: #0f172a; --color-footer-text: #94a3b8; --shadow-card: 0 4px 24px rgba(0,0,0,.45); --shadow-card-hover: 0 12px 36px rgba(0,0,0,.6); } @media (prefers-color-scheme: dark) { :root { --color-bg: #0f172a; --color-surface: #1e293b; --color-card: #243348; --color-text: #e2e8f0; --color-muted: #94a3b8; --color-border: #334155; --color-nav-bg: #1e293b; --color-nav-text: #e2e8f0; --color-footer-bg: #0f172a; --color-footer-text: #94a3b8; --shadow-card: 0 4px 24px rgba(0,0,0,.45); --shadow-card-hover: 0 12px 36px rgba(0,0,0,.6); } } /* Explicit light theme (tenant turned dark mode off) must beat the prefers-color-scheme dark fallback for our neutral tokens. */ [data-bs-theme="light"] { --color-bg: #ffffff; --color-surface: #f8fafc; --color-card: #ffffff; --color-text: #1e293b; --color-muted: #64748b; --color-border: #e2e8f0; } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: var(--ws-font-body); font-size: 1rem; line-height: 1.65; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; /* Sticky footer: body fills the viewport,
stretches to absorb the remaining space so .site-footer is pinned to the bottom on short pages. */ min-height: 100vh; display: flex; flex-direction: column; } h1, h2, h3, h4, h5, h6 { font-family: var(--ws-font-heading); } main { flex: 1 0 auto; } h1,h2,h3,h4,h5,h6 { line-height: 1.2; font-weight: 700; color: var(--color-text); } a { color: var(--color-primary); } a:hover { color: var(--color-primary-dk); } /* ── Bootstrap primary colour override ── */ .btn-primary { background: var(--color-primary); border-color: var(--color-primary); font-weight: 600; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); } .btn-primary:hover { background: var(--color-primary-dk); border-color: var(--color-primary-dk); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(37,99,235,.35); } .btn-outline-primary { color: var(--color-primary); border-color: var(--color-primary); font-weight: 600; transition: var(--transition); } .btn-outline-primary:hover { background: var(--color-primary); border-color: var(--color-primary); transform: translateY(-1px); } /* ── Navbar ── */ .site-nav { /* min-height (not height) so that on mobile, when the collapsed menu expands, the navbar grows to wrap the menu items — otherwise the items overflow the 72px box and render with no background over the hero. */ min-height: var(--nav-height); /* Solid colour: the previous semi-transparent background let the sticky booking-panel calendar bleed through on scroll, which read as a layout bug. Tenants now pick the colour via WebsiteSettings (--color-nav-bg). */ background: var(--color-nav-bg); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 1000; } .site-nav .navbar-brand { font-size: 1.4rem; font-weight: 800; color: var(--color-nav-text); letter-spacing: -.5px; } .site-nav .nav-link { color: var(--color-nav-text); font-weight: 500; padding: .4rem .9rem; border-radius: .5rem; transition: background var(--transition); } .site-nav .nav-link:hover { /* Subtle highlight that adapts to whatever nav colour the tenant picked, so a dark nav highlights with a lighter tint and vice-versa. */ background: color-mix(in srgb, var(--color-nav-text) 8%, transparent); } /* ── Section titles ── */ .section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 800; letter-spacing: -.02em; margin-bottom: .5rem; } .section-subtitle { font-size: 1.05rem; color: var(--color-muted); max-width: 600px; margin: 0 auto; } /* ── Property Card ── */ .property-grid-block { background: var(--color-surface); } .property-card { border-radius: var(--radius-card); box-shadow: var(--shadow-card); transition: box-shadow var(--transition), transform var(--transition); overflow: hidden; background: var(--color-card); } .property-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-4px); } .property-card-img { height: 220px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%); position: relative; overflow: hidden; } .property-card-img.has-image { background: none; } .property-card-img.has-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } /* Amenities — tenant types a free-text list, one per line; we render it as a two-column checklist with a tick glyph so it visually reads as "what's included" rather than a generic paragraph. The grid collapses to a single column on mobile so each item gets enough room without truncating. */ .property-amenities-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: .5rem 1.5rem; } @media (min-width: 576px) { .property-amenities-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .property-amenities-list li { position: relative; padding-left: 1.75rem; color: var(--color-text); } .property-amenities-list li::before { content: "✓"; position: absolute; left: 0; top: 0; width: 1.25rem; height: 1.25rem; line-height: 1.25rem; text-align: center; border-radius: 50%; color: var(--color-primary); font-weight: 700; background: color-mix(in srgb, var(--color-primary) 12%, transparent); } /* Rich-text property description — render headings, lists and links sensibly without leaning on Bootstrap's overrides. The sanitiser allow-list bounds the tags that can appear here. */ .property-description h1, .property-description h2, .property-description h3, .property-description h4, .property-description h5, .property-description h6 { margin-top: 1.5rem; margin-bottom: .5rem; font-weight: 700; line-height: 1.25; } .property-description h1 { font-size: 1.75rem; } .property-description h2 { font-size: 1.5rem; } .property-description h3 { font-size: 1.25rem; } .property-description h4 { font-size: 1.1rem; } .property-description p { margin-bottom: 1rem; } .property-description ul, .property-description ol { margin: 0 0 1rem 1.5rem; padding: 0; } .property-description li { margin-bottom: .25rem; } .property-description blockquote { border-left: 3px solid var(--color-primary); margin: 1rem 0; padding: .25rem 0 .25rem 1rem; color: var(--color-text-muted, #475569); font-style: italic; } .property-description a { color: var(--color-primary); text-decoration: underline; } .property-description a:hover { text-decoration: none; } .property-description code { background: var(--color-surface); padding: .15rem .35rem; border-radius: .25rem; font-size: .9em; } .property-description pre { background: var(--color-surface); padding: 1rem; border-radius: .375rem; overflow-x: auto; } .property-description hr { margin: 1.5rem 0; } /* Property detail gallery — main image + horizontal thumbnail carousel. */ .property-gallery-main { aspect-ratio: 16 / 10; max-height: 480px; overflow: hidden; border-radius: .5rem; background: var(--color-surface); } .property-gallery-main > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 150ms ease; } .property-gallery-thumbs { display: flex; gap: .5rem; overflow-x: auto; padding: .25rem 0 .5rem; scroll-snap-type: x proximity; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .property-gallery-thumb { flex: 0 0 auto; width: 120px; height: 80px; padding: 0; border: 2px solid transparent; border-radius: .375rem; overflow: hidden; background: none; cursor: pointer; scroll-snap-align: start; transition: border-color 150ms ease, opacity 150ms ease; } .property-gallery-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; } .property-gallery-thumb:hover, .property-gallery-thumb:focus-visible { border-color: var(--color-primary); outline: none; } .property-gallery-thumb.is-active { border-color: var(--color-primary); } .property-gallery-thumb:not(.is-active) > img { opacity: .65; } .property-type-badge { background: rgba(255,255,255,.18); color: #fff; padding: .3rem .85rem; border-radius: 2rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.25); } /* Phase 5c: badge in the corner of multi-room property cards. */ .rooms-badge { position: absolute; top: .75rem; right: .75rem; background: rgba(15,23,42,.7); color: #fff; padding: .25rem .65rem; border-radius: 999px; font-size: .72rem; font-weight: 600; letter-spacing: .03em; backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.15); line-height: 1.2; } /* "Unavailable" state on property cards. Shown on the listing when a visitor searched a specific date range and a property isn't bookable for it. The card is kept in the grid (rather than filtered out) so the visitor can still see what's there and pick alternative dates — but it's visually muted so available options stand out. */ .property-card.is-unavailable { opacity: .55; filter: grayscale(.6); transition: opacity var(--transition), filter var(--transition); } .property-card.is-unavailable:hover { /* Neutralise the lift hover so unavailable cards don't read as actionable. */ transform: none; box-shadow: var(--shadow-card); opacity: .75; filter: grayscale(.3); } /* Diagonal "Unavailable" sash across the image. Sits above .rooms-badge so a multi-room property still flags unavailable clearly. */ .unavailable-badge { position: absolute; top: .75rem; left: .75rem; background: rgba(15, 23, 42, .85); color: #fff; padding: .35rem .8rem; border-radius: .35rem; font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; border: 1px solid rgba(255, 255, 255, .2); line-height: 1.2; z-index: 2; } @media (prefers-color-scheme: dark) { .unavailable-badge { background: rgba(15, 23, 42, .9); } } [data-bs-theme="dark"] .unavailable-badge { background: rgba(15, 23, 42, .9); } .property-card .card-title { color: var(--color-text); font-size: 1.05rem; } .property-card .card-text { font-size: .875rem; } .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* ── Properties Page ── */ .properties-page-header { background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .date-filter-bar { background: var(--color-card); border-radius: .75rem; box-shadow: var(--shadow-card); padding: 1rem 1.5rem; } /* ── Detail Page ── */ .property-detail-hero { height: 420px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%); border-radius: var(--radius-card); display: flex; align-items: center; justify-content: center; } .booking-panel .card { border-radius: var(--radius-card); overflow: hidden; } /* Bootstrap's .sticky-top is z-index 1020, which puts this panel in front of the navbar (z-index 1000) when scrolled — drop it below so the navbar wins. */ .booking-panel.sticky-top { z-index: 900; } /* Header tracks the tenant's nav palette so contrast is consistent across the page chrome (was a hardcoded bg-primary + white text that read badly on light nav backgrounds). */ .booking-panel .booking-panel-header { background: var(--color-nav-bg); color: var(--color-nav-text); border-bottom: 1px solid var(--color-border); } /* The heading inside must track the nav-text colour too — the global `h1..h6 { color: var(--color-text) }` rule (element specificity) otherwise wins over the header's inherited colour and flips the title to the body text colour, which is invisible against the nav-coloured header in dark mode. */ .booking-panel .booking-panel-header h5 { color: var(--color-nav-text); } .booking-calendar-wrap .flatpickr-calendar.inline { width: 100% !important; box-shadow: none !important; border: none !important; border-radius: 0 !important; } .booking-calendar-wrap .flatpickr-months, .booking-calendar-wrap .flatpickr-weekdays { background: transparent !important; } /* Flatpickr ships light-mode text colours (dark grey day numbers, month title and weekday headers) from its CDN CSS. Those are near-invisible on the dark card, so re-point every text element at our theme tokens — which flip with dark mode — instead of flatpickr's hardcoded greys. */ .booking-calendar-wrap .flatpickr-current-month, .booking-calendar-wrap .flatpickr-current-month input.cur-year, .booking-calendar-wrap .flatpickr-monthDropdown-months { color: var(--color-text) !important; fill: var(--color-text) !important; } .booking-calendar-wrap .flatpickr-weekday { color: var(--color-muted) !important; } .booking-calendar-wrap .flatpickr-day { color: var(--color-text); } .booking-calendar-wrap .flatpickr-day.prevMonthDay, .booking-calendar-wrap .flatpickr-day.nextMonthDay { color: var(--color-muted); } .booking-calendar-wrap .flatpickr-day:hover, .booking-calendar-wrap .flatpickr-day.prevMonthDay:hover, .booking-calendar-wrap .flatpickr-day.nextMonthDay:hover { background: var(--color-surface); border-color: var(--color-surface); } /* Prev/next month arrows are SVGs filled with a hardcoded dark grey. */ .booking-calendar-wrap .flatpickr-months .flatpickr-prev-month svg, .booking-calendar-wrap .flatpickr-months .flatpickr-next-month svg { fill: var(--color-text) !important; } .booking-calendar-wrap .flatpickr-months .flatpickr-prev-month:hover svg, .booking-calendar-wrap .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--color-primary) !important; } .booking-calendar-wrap .flatpickr-day.selected, .booking-calendar-wrap .flatpickr-day.startRange, .booking-calendar-wrap .flatpickr-day.endRange { background: var(--color-primary) !important; border-color: var(--color-primary) !important; } .booking-calendar-wrap .flatpickr-day.inRange { background: rgba(37,99,235,.12) !important; border-color: transparent !important; box-shadow: none !important; } .booking-calendar-wrap .flatpickr-day.disabled, .booking-calendar-wrap .flatpickr-day.disabled:hover { color: var(--color-muted) !important; background: var(--color-surface) !important; text-decoration: line-through !important; cursor: not-allowed !important; } .date-display { font-size: 1rem; color: var(--color-text); } /* ── Footer ── */ .site-footer { background: var(--color-footer-bg); color: var(--color-footer-text); font-size: .9rem; } .site-footer h5, .site-footer h6, .site-footer .text-white { color: var(--color-footer-text) !important; /* Headings sit on top of the footer-text colour at full opacity, while body copy uses 75% so there's still a hierarchy without forcing two separate tenant inputs. */ opacity: 1; } .site-footer p, .site-footer ul { color: color-mix(in srgb, var(--color-footer-text) 75%, transparent); } .site-footer a { color: var(--color-footer-text); opacity: .85; text-decoration: none; } .site-footer a:hover { opacity: 1; } /* ── Flatpickr overrides ── */ /* The flatpickr stylesheet ships a fixed light palette and (unlike Bootstrap) does not follow data-bs-theme, so we route its colours through the palette tokens. The light token values match flatpickr's own defaults, so light mode is unchanged; dark mode picks up the dark tokens automatically. */ .flatpickr-calendar { border-radius: .75rem; box-shadow: var(--shadow-card-hover); border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text); font-family: var(--ws-font-body); } .flatpickr-calendar.inline { background: transparent; } .flatpickr-months .flatpickr-month, .flatpickr-current-month, .flatpickr-current-month input.cur-year, .flatpickr-monthDropdown-months, .flatpickr-weekday { color: var(--color-text); } .flatpickr-weekday { color: var(--color-muted); } .flatpickr-day { color: var(--color-text); } .flatpickr-day:hover, .flatpickr-day:focus { background: var(--color-surface); } .flatpickr-months .flatpickr-prev-month svg, .flatpickr-months .flatpickr-next-month svg { fill: var(--color-text); } .flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .flatpickr-day.inRange { background: rgba(37,99,235,.1); border-color: transparent; } .flatpickr-day.disabled, .flatpickr-day.disabled:hover { color: var(--color-muted) !important; background: transparent !important; } /* ── Letter spacing helper ── */ .letter-spacing-1 { letter-spacing: .1em; } /* ── Utilities ── */ .opacity-90 { opacity: .9; } .bg-surface { background: var(--color-surface); } /* ── Help Center ──────────────────────────────────────────────────────────── */ /* All help pages share a .help-page wrapper. */ /* The help host has no tenant CSS variables, so these styles reference only */ /* the default :root variables above (no --color-nav-bg etc. from tenant). */ .help-page { min-height: 60vh; } /* Hero (Index page only) */ .help-hero { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dk) 100%); padding: 4rem 0 3rem; text-align: center; color: #fff; } .help-hero__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; color: #fff; margin-bottom: .5rem; } .help-hero__subtitle { font-size: 1.1rem; opacity: .9; margin-bottom: 2rem; } /* Search form (shared: hero + search page) */ .help-search-form__inner { display: flex; align-items: center; background: #fff; border-radius: .75rem; max-width: 600px; margin: 0 auto; padding: .25rem .25rem .25rem .75rem; box-shadow: 0 4px 20px rgba(0,0,0,.15); } .help-search-form__icon { font-size: 1.1rem; color: var(--color-muted); flex-shrink: 0; margin-right: .5rem; } .help-search-form__input { flex: 1; border: none; outline: none; font-size: 1rem; padding: .5rem; color: var(--color-text); background: transparent; min-width: 0; /* prevent overflow on narrow viewports */ } .help-search-form__input::placeholder { color: var(--color-muted); } .help-search-form__btn { flex-shrink: 0; min-height: 44px; /* WKWebView tap target */ padding: .5rem 1.25rem; } /* Page-mode search form */ .help-search-form--page .help-search-form__inner { background: var(--color-surface); border: 1px solid var(--color-border); box-shadow: none; max-width: 100%; margin: 0; } .help-search-form--page .help-search-form__input { color: var(--color-text); } /* Breadcrumb bar */ .help-breadcrumb-bar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: .75rem 0; } /* Category cards (Index) */ .help-categories { padding: 3rem 0 4rem; } .help-card { display: block; height: 100%; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: 1.5rem; text-decoration: none; color: var(--color-text); transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition); } .help-card:hover { box-shadow: var(--shadow-card-hover); transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-text); } .help-card__icon { font-size: 2rem; color: var(--color-primary); display: block; margin-bottom: .75rem; } .help-card__title { font-size: 1.15rem; font-weight: 700; margin-bottom: .25rem; } .help-card__count { font-size: .85rem; color: var(--color-muted); margin-bottom: 1rem; } .help-card__articles { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--color-border); padding-top: .75rem; } .help-card__article-item { font-size: .875rem; color: var(--color-muted); padding: .2rem 0; } .help-card__article-more { font-style: italic; } /* Article list (Category + Search pages) */ .help-article-list { list-style: none; padding: 0; margin: 1.5rem 0 0; } .help-article-list__item { border-bottom: 1px solid var(--color-border); } .help-article-list__item:first-child { border-top: 1px solid var(--color-border); } .help-article-list__link { display: flex; flex-direction: column; padding: 1rem .5rem; text-decoration: none; color: var(--color-text); transition: color var(--transition); position: relative; } .help-article-list__link:hover { color: var(--color-primary); } .help-article-list__title { font-weight: 600; font-size: 1rem; margin-bottom: .2rem; padding-right: 1.5rem; /* space for chevron */ } .help-article-list__summary { font-size: .875rem; color: var(--color-muted); } .help-article-list__chevron { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: 1.1rem; color: var(--color-muted); } /* Category page */ .help-category-page { padding: 2.5rem 0 4rem; } .help-category-page__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: .25rem; } .help-category-page__count { margin-bottom: 0; } /* Article page */ .help-article-container { padding: 2.5rem 0 4rem; } .help-article { margin-bottom: 2.5rem; } .help-article__header { margin-bottom: 1.5rem; } .help-article__title { font-size: clamp(1.5rem, 3vw, 2.25rem); margin-bottom: .5rem; } .help-article__summary { font-size: 1.1rem; color: var(--color-muted); font-weight: 400; margin-bottom: 0; } /* Article body — give md-generated elements sensible spacing */ .help-article__body h2 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: .75rem; } .help-article__body h3 { font-size: 1.1rem; margin-top: 1.5rem; margin-bottom: .5rem; } .help-article__body p { margin-bottom: 1rem; } .help-article__body ul, .help-article__body ol { margin-bottom: 1rem; padding-left: 1.5rem; } .help-article__body li { margin-bottom: .35rem; } .help-article__body pre { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .5rem; padding: 1rem; overflow-x: auto; font-size: .875rem; } .help-article__body code { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: .25rem; padding: .1em .35em; font-size: .875em; } .help-article__body pre code { background: none; border: none; padding: 0; } .help-article__body blockquote { border-left: 4px solid var(--color-primary); margin-left: 0; padding-left: 1rem; color: var(--color-muted); } .help-article__body img { max-width: 100%; height: auto; border-radius: .5rem; } /* Feedback widget */ .help-feedback { border-top: 1px solid var(--color-border); padding-top: 1.5rem; margin-top: 2rem; } .help-feedback__question { font-weight: 600; margin-bottom: .75rem; } .help-feedback__actions { display: flex; gap: .75rem; flex-wrap: wrap; } .help-feedback__btn { min-height: 44px; /* WKWebView tap target */ min-width: 100px; padding: .5rem 1.5rem; border-radius: .5rem; font-weight: 600; font-size: .95rem; cursor: pointer; transition: background var(--transition), color var(--transition), border-color var(--transition); border: 2px solid var(--color-border); background: var(--color-surface); color: var(--color-text); } .help-feedback__btn:hover { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); } .help-feedback__btn--yes:hover { border-color: #16a34a; color: #16a34a; background: #f0fdf4; } .help-feedback__btn--no:hover { border-color: #dc2626; color: #dc2626; background: #fef2f2; } /* Post-feedback "thanks" */ .help-feedback-thanks { display: flex; align-items: center; background: #f0fdf4; color: #166534; border: 1px solid #bbf7d0; border-radius: .5rem; padding: .75rem 1rem; font-weight: 500; margin-top: 2rem; } /* Search page */ .help-search-page { padding: 2.5rem 0 4rem; } .help-search-page__title { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 1.25rem; } .help-search-page__no-results { color: var(--color-muted); } .help-search-page__result-count { margin-bottom: 0; } /* Back link */ .help-back-link a { color: var(--color-muted); text-decoration: none; font-size: .9rem; } .help-back-link a:hover { color: var(--color-primary); } /* Dark mode — most help colours come straight from the palette tokens, which flip automatically. Only the semantic success/error tints (which use fixed green/red, not tokens) need an explicit dark variant so they stay readable. Both selectors are covered: the @media path for no-JS, the attribute path for the matchMedia script (which also flips Bootstrap's components). */ @media (prefers-color-scheme: dark) { .help-feedback__btn--yes:hover { background: rgba(22, 163, 74, .12); } .help-feedback__btn--no:hover { background: rgba(220, 38, 38, .12); } .help-feedback-thanks { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .3); color: #86efac; } } [data-bs-theme="dark"] .help-feedback__btn--yes:hover { background: rgba(22, 163, 74, .12); } [data-bs-theme="dark"] .help-feedback__btn--no:hover { background: rgba(220, 38, 38, .12); } [data-bs-theme="dark"] .help-feedback-thanks { background: rgba(22, 163, 74, .12); border-color: rgba(22, 163, 74, .3); color: #86efac; } /* Ensure no horizontal scroll at 375px */ @media (max-width: 576px) { .help-hero { padding: 2.5rem 0 2rem; } .help-hero__subtitle { font-size: 1rem; } .help-search-form__btn { padding: .5rem .75rem; font-size: .875rem; } .help-article-container { padding: 1.5rem 0 2.5rem; } .help-category-page, .help-search-page { padding: 1.5rem 0 2.5rem; } } /* ── Guidebook (guest surfaces) ──────────────────────────────────────────────── Shared by /guest/{token}/guidebook, /guidebook/{token} and both per-page detail routes. Lives here rather than in a per-page