/* --------------------------------------------------------------------- Zuberec brand layer — ported from the WordPress theme so the two halves of the product look like one product. The values here are not new design work; they are the theme's own palette and type pair, lifted so that a guest who books on the WP site and then lands on a Django-served status page doesn't feel handed off to a different company. Sources: wp-content/themes/zuberec/assets/css/typical-page.css (page shell) wp-content/themes/zuberec/functions.php (footer band) wp-content/themes/zuberec/assets/css/home.css (accent) Two things were deliberately NOT ported: * The homepage's second type pair (Alegreya / Source Sans 3). The WP site runs two design languages — the marketing homepage and the quieter "typical page" template. Everything Django serves is the quiet kind, so it takes that one and leaves the loud one behind. * The cream page background. That one was swapped for a greige (see --paper) — same warmth, less yellow. * Fixed small type. The WP typical page sets 15px body text, which is fine for a legal page a young visitor skims. Our host audience is mostly older and reading on a phone at arm's length, so the host-facing scale is deliberately larger (see --size-* below). Same palette, different metrics — the identity is the colour and the type, not the pixel sizes. --------------------------------------------------------------------- */ :root { /* Surfaces */ /* Greige, not the theme's cream (#f5f1e9). Still a warm base rather than a neutral grey, and that warmth is doing work: the footer band is a warm dark green and links are gold, and both start reading as foreign objects on a cold grey. Chosen over #f2f2f1 and #eceef0 for exactly that reason. */ --paper: #f1efeb; /* page background */ --card: #ffffff; --card-soft: #f8f7f4; --line: rgba(31, 36, 32, 0.1); --line-solid: #e3e0d9; /* Ink */ --ink: #1a1f1b; /* headings */ --body: #4b514a; /* running text */ --muted: #5b6058; --faint: #a89f92; /* breadcrumbs, timestamps */ /* Brand */ --gold: #a97a2e; /* links */ --gold-dark: #8a6224; --terracotta: #c1652f; /* the homepage accent — used sparingly */ --forest: #2f4a37; --forest-dark: #1c3627; /* Semantic states. Kept close to the WP dashboard's so a host sees the same colour mean the same thing in both places. */ --ok: #245740; --ok-bg: #e8f2ec; --ok-line: #b9d6c5; --warn: #8a5a12; --warn-bg: #fdf3e2; --warn-line: #e6cfa4; --danger: #9b3024; --danger-bg: #fbe9e7; --danger-line: #edc0ba; /* Type. Newsreader + Work Sans, matching the theme's typical-page template. Both fallback stacks end in a real system family, so a slow or blocked font CDN degrades to plain text rather than to an unstyled page — this has to stay readable on a bad connection. */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif; /* Metrics. Larger than the WP typical page on purpose — see header. */ --size-body: 17px; --size-small: 15px; --size-tiny: 13px; --tap: 52px; /* minimum touch target */ --radius: 12px; --shell: 1180px; /* the theme's content box */ } * { box-sizing: border-box; } /* `height` on the html element only. Giving it to too caps the body box at one viewport, and the body box is the containing block of the sticky header — a sticky element cannot stay pinned past the bottom of its containing block, so on a page taller than two screens the header scrolled away near the end. It showed on a phone and not on a narrow desktop window only because the phone's one-column list is long enough to scroll past that point. `min-height` on body below keeps the short-page behaviour this was for. */ html { height: 100%; } body { margin: 0; display: flex; flex-direction: column; min-height: 100%; background: var(--paper); color: var(--body); font-family: var(--sans); font-size: var(--size-body); line-height: 1.6; -webkit-tap-highlight-color: transparent; } a { color: var(--gold); text-decoration: none; } a:hover { color: var(--gold-dark); text-decoration: underline; } h1, h2, h3 { font-family: var(--serif); font-weight: 500; color: var(--ink); letter-spacing: -0.015em; line-height: 1.2; } h1 { font-size: clamp(26px, 4vw, 34px); margin: 0 0 6px; } h2 { font-size: 22px; margin: 30px 0 8px; } h3 { font-size: 19px; margin: 0 0 4px; } p { margin: 0 0 14px; } .muted { color: var(--muted); font-size: var(--size-small); } .faint { color: var(--faint); font-size: var(--size-tiny); } hr { border: 0; border-top: 1px solid var(--line); margin: 20px 0; } /* ---- Page shell ----------------------------------------------------- */ .shell { max-width: var(--shell); margin: 0 auto; padding: 0 20px; } /* Content column, not page width: long lines are the fastest way to make a page unreadable, and most of what we serve is prose or a short form. */ .column { max-width: 640px; margin: 0 auto; } main { flex: 1 0 auto; padding: 34px 0 70px; } /* ---- Header --------------------------------------------------------- */ /* The theme's sticky translucent bar. Three-column grid so the logo is optically centred regardless of how long the side items are. */ .site-header { position: sticky; top: 0; z-index: 40; background: rgba(241, 239, 235, 0.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .site-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; height: 68px; } .site-header a { color: var(--muted); } .site-header a:hover { color: var(--ink); text-decoration: none; } .header-back { display: flex; align-items: center; gap: 8px; font-size: var(--size-tiny); } .header-logo { justify-self: center; display: flex; align-items: center; } .header-logo img { height: 28px; width: auto; display: block; } .header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; font-size: var(--size-tiny); white-space: nowrap; } /* ---- Footer --------------------------------------------------------- */ /* The same dark band as the theme's, gradient included: the WP page bookends on the palette it opens with, and so should this one. */ .site-footer { flex-shrink: 0; background: linear-gradient(147deg, #1c3627 0%, #132318 55%, #0a130d 100%); color: #e7e2d3; padding: 34px 0 26px; font-size: 13.5px; } .site-footer a { color: #c9d1c2; } .site-footer a:hover { color: #fff; text-decoration: none; } .footer-cols { display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; margin-bottom: 18px; } .footer-col { display: flex; flex-direction: column; gap: 6px; } .footer-col h4 { font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: #fff; margin: 0 0 4px; } .footer-brand { max-width: 320px; gap: 10px; } .footer-brand img { height: 28px; width: auto; display: block; } .footer-brand p { margin: 0; line-height: 1.55; color: #c9d1c2; } .footer-base { border-top: 1px solid rgba(244, 234, 212, 0.14); padding-top: 16px; display: flex; flex-wrap: wrap; gap: 6px 16px; justify-content: space-between; align-items: center; font-size: 12.5px; color: #9fae95; } .footer-credit { display: flex; align-items: center; gap: 6px; } .footer-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--terracotta); } /* ---- Cards ---------------------------------------------------------- */ .card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; margin-bottom: 14px; } /* A touch of the portal's own polish (its --lift-2 shadow) without importing portal.css into this shell — that stylesheet's tighter radii and denser type were sized for the public site's browsing audience, not the larger, plainer controls this shell deliberately keeps for an older, less technical one. One shadow, added where a screen wants to read as a step up from the page rather than a border away from it. */ .card.lifted { border-color: transparent; box-shadow: 0 2px 8px rgba(20, 24, 27, .08); } /* ---- Buttons -------------------------------------------------------- */ /* Deliberately large. Mis-taps are the single most common frustration for this audience on a phone, and a 52px target costs us nothing. */ .btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 13px 22px; font-family: var(--sans); font-size: var(--size-body); font-weight: 600; border-radius: 10px; border: 2px solid var(--forest); background: var(--forest); color: #fff; cursor: pointer; text-decoration: none; text-align: center; transition: background 0.15s, border-color 0.15s; } .btn:hover { background: var(--forest-dark); border-color: var(--forest-dark); color: #fff; text-decoration: none; } .btn.secondary { background: var(--card); color: var(--forest); } .btn.secondary:hover { background: var(--card-soft); color: var(--forest-dark); } .btn.danger { background: var(--card); color: var(--danger); border-color: var(--danger); } .btn.danger:hover { background: var(--danger-bg); color: var(--danger); border-color: var(--danger); } .btn.wide { display: flex; width: 100%; } .btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .btn-row form { flex: 1 1 auto; margin: 0; } /* ---- Forms ---------------------------------------------------------- */ label { display: block; font-weight: 600; color: var(--ink); margin: 14px 0 4px; } input[type=text], input[type=url], input[type=date], input[type=number], input[type=email], select, textarea { width: 100%; min-height: var(--tap); padding: 12px 14px; font-family: var(--sans); font-size: var(--size-body); border: 2px solid var(--line-solid); border-radius: 10px; background: #fff; color: var(--ink); } input:focus, select:focus, textarea:focus { outline: 3px solid var(--forest); outline-offset: 1px; border-color: var(--forest); } /* ---- Messages and pills --------------------------------------------- */ .msg { padding: 14px 16px; border-radius: 10px; margin-bottom: 12px; font-size: var(--size-small); } .msg.success { background: var(--ok-bg); border: 1px solid var(--ok-line); color: var(--ok); } .msg.info { background: #eef2f7; border: 1px solid #cbd6e2; color: var(--body); } .msg.warning { background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn); } .msg.error { background: var(--danger-bg); border: 1px solid var(--danger-line); color: var(--danger); } .pill { display: inline-block; padding: 5px 14px; border-radius: 999px; font-size: 14px; font-weight: 600; } .pill.open, .pill.confirmed { background: var(--ok-bg); color: var(--ok); } .pill.paused, .pill.cancelled { background: #e6e3dd; color: var(--muted); } .pill.pending { background: var(--warn-bg); color: var(--warn); } .pill.failing { background: var(--danger-bg); color: var(--danger); } /* ---- Note ----------------------------------------------------------- */ .note { background: #f3f6f4; border-left: 4px solid var(--forest); padding: 12px 16px; border-radius: 0 8px 8px 0; font-size: var(--size-small); } .note p:last-child { margin-bottom: 0; } /* Inline "back" link above a page title, for screens reached from a list. */ .back { display: inline-block; margin-bottom: 12px; font-size: var(--size-small); } /* ---- Breadcrumb ----------------------------------------------------- */ .breadcrumb { display: flex; align-items: center; gap: 9px; font-size: 12px; color: var(--faint); margin-bottom: 14px; } .breadcrumb a { color: var(--faint); } .breadcrumb a:hover { color: var(--muted); } /* ---- Wider viewports ------------------------------------------------ */ @media (min-width: 640px) { .shell { padding-left: 40px; padding-right: 40px; } } /* ---- Cookie consent -------------------------------------------------- Lives in brand.css, not portal.css: every app (public, hostportal, bookings) loads this file, so the banner and its footer reopen link work the same way on every page of the domain, not just the public portal. Hidden by default only once JS has actually confirmed a stored choice — see static/js/cookie-consent.js — so a page with JS blocked keeps showing it rather than silently skipping consent. */ .cookie-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: flex; justify-content: center; padding: 0 16px 16px; pointer-events: none; } .cookie-banner[hidden] { display: none; } .cookie-banner-card { pointer-events: auto; width: 100%; max-width: 780px; box-sizing: border-box; background: #fff; border-radius: 7px; box-shadow: 0 -2px 6px rgba(20, 24, 27, 0.06), 0 18px 44px rgba(10, 19, 13, 0.28); overflow: hidden; } .cookie-banner-main { display: flex; align-items: flex-start; gap: 18px; padding: 20px 22px; flex-wrap: wrap; } .cookie-banner-copy { flex: 1; min-width: 260px; display: flex; flex-direction: column; gap: 7px; } .cookie-banner-heading { display: flex; align-items: center; gap: 9px; } .cookie-banner-heading span { font-size: 14.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } .cookie-banner-copy p { font-size: 13px; line-height: 1.62; color: var(--muted); margin: 0; } .cookie-banner-copy a { font-size: 12.5px; font-weight: 600; color: var(--forest-dark); align-self: flex-start; } .cookie-banner-actions { display: flex; flex-direction: column; gap: 7px; flex: none; min-width: 186px; } .cookie-banner-actions button { font-family: inherit; cursor: pointer; } .cookie-btn-accept { background: var(--forest-dark); color: #fff; border: none; border-radius: 5px; padding: 11px 20px; font-size: 13.5px; font-weight: 600; } .cookie-btn-accept:hover { background: var(--forest); } .cookie-btn-reject { background: #fff; color: var(--ink); border: 1px solid var(--line-solid); border-radius: 5px; padding: 11px 20px; font-size: 13.5px; } .cookie-btn-reject:hover { background: #f4f5f7; } .cookie-btn-customize { background: none; color: var(--muted); border: none; padding: 5px; font-size: 12.5px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; } .cookie-btn-customize:hover { color: var(--ink); } .cookie-btn-customize svg { transition: transform 0.18s ease; } .cookie-banner[data-detail-open="1"] .cookie-btn-customize svg { transform: rotate(180deg); } .cookie-banner-detail { border-top: 1px solid var(--line); background: #f8f9fa; display: none; } .cookie-banner[data-detail-open="1"] .cookie-banner-detail { display: block; } .cookie-cat-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 22px; border-bottom: 1px solid var(--line); } .cookie-cat-row:last-child { border-bottom: none; } .cookie-cat-copy { flex: 1; display: flex; flex-direction: column; gap: 3px; } .cookie-cat-name { display: flex; align-items: center; gap: 9px; } .cookie-cat-name span:first-child { font-size: 13.5px; font-weight: 600; color: var(--ink); } .cookie-cat-tag { font-size: 10.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 3px; padding: 2px 6px; background: #e6e3dd; color: var(--muted); } .cookie-cat-tag.optional { background: #eaf1ec; color: var(--forest-dark); } .cookie-cat-copy p { font-size: 12.5px; line-height: 1.6; color: var(--faint); margin: 0; } .cookie-switch { flex: none; width: 42px; height: 24px; border-radius: 12px; border: none; padding: 0; position: relative; transition: background 0.16s ease; background: #cfd3ce; } .cookie-switch[aria-checked="true"] { background: var(--forest-dark); } .cookie-switch:disabled { cursor: default; opacity: 0.7; } .cookie-switch:not(:disabled) { cursor: pointer; } .cookie-switch-knob { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 9px; background: #fff; box-shadow: 0 1px 3px rgba(20, 24, 27, 0.3); transition: left 0.16s ease; } .cookie-switch[aria-checked="true"] .cookie-switch-knob { left: 21px; } .cookie-banner-save { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 22px; border-top: 1px solid var(--line); background: #fff; } .cookie-banner-save span { font-size: 12px; color: var(--faint); } .cookie-btn-save { flex: none; background: var(--gold); color: var(--ink); border: none; border-radius: 5px; padding: 10px 20px; font-family: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; } .footer-cookie-settings { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: #c9d1c2; text-align: left; } .footer-cookie-settings:hover { color: #fff; text-decoration: none; }