/* --------------------------------------------------------------------- Scoped for embedding: every rule lives under .booking-widget so this stylesheet can be dropped into an existing page without touching that page's own body/link/* styles. IMPORTANT: no `rem` units anywhere below. `rem` is relative to the HOST PAGE's font-size, which we don't control — if the host theme sets a smaller root font-size (a common pattern, e.g. an `html { font-size: 62.5% }` reset), every `rem` value in here would shrink along with it, which is exactly what happened when this was embedded on the Havenfield site. Instead every size is `calc(var(--bw-rem) * n)`, anchored to --bw-rem below — a fixed pixel value set once, right here, immune to whatever the host page does. ------------------------------------------------------------------------ */ .booking-widget { --bw-rem: 16px; /* the widget's own "1rem" — change this one line to rescale everything */ --bw-max-width: 2000px; /* cap on very large screens; override by setting this custom property on the wrapper */ --bw-bg: #F7F3EC; --bw-surface: #faf9f9; --bw-ink: #23281E; --bw-muted: #6B6E63; --bw-primary: #1F3B2C; --bw-accent: #B08D57; --bw-booked: #B08D57; --bw-line: #E4DDCC; --bw-titlebg: #8f7f6f; --bw-holiday: #EFE7D8; --bw-font-display: 'Libre Baskerville', serif; --bw-font-body: 'Montserrat', sans-serif; max-width: var(--bw-max-width); margin: 0 auto; font-family: var(--bw-font-body); font-size: var(--bw-rem); color: var(--bw-ink); line-height: 1.5; } .booking-widget *, .booking-widget *::before, .booking-widget *::after { box-sizing: border-box; } .booking-widget a { color: inherit; } /* Year nav ------------------------------------------------------------- */ .booking-widget .bw-year-nav { display: flex; align-items: center; justify-content: flex-start; gap: calc(var(--bw-rem) * 1); font-family: var(--bw-font-display); font-size: calc(var(--bw-rem) * 1.3); color: var(--bw-ink); } .booking-widget .bw-year-nav a { text-decoration: none; color: var(--bw-primary); border: 1px solid var(--bw-line); border-radius: 50%; width: calc(var(--bw-rem) * 1.9); height: calc(var(--bw-rem) * 1.9); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .booking-widget .bw-year-nav a:hover { background: var(--bw-bg); border-color: var(--bw-accent); } .booking-widget .bw-year-nav__year { min-width: 3.5ch; text-align: center; font-weight: 600; } /* Legend --------------------------------------------------------------- */ .booking-widget .bw-legend { display: flex; align-items: center; gap: calc(var(--bw-rem) * 0.5); margin: calc(var(--bw-rem) * 1) 0 0; color: var(--bw-muted); font-size: calc(var(--bw-rem) * 0.85); } .booking-widget .bw-legend svg { width: 13px; height: 13px; fill: var(--bw-booked); flex-shrink: 0; } /* Year grid of month cards -------------------------------------------- Small/medium screens: 2 columns / 6 rows Wide monitors (>=1180px): 4 columns / 3 rows Extra-wide (>=1700px): 6 columns / 2 rows These breakpoints are based on browser viewport width (standard media queries). If the widget sits in a narrow column on a wide monitor — e.g. a sidebar — it may still switch to 4 or 6 columns and feel cramped, since the query looks at the whole viewport, not the surrounding container. If that turns out to be the case, this can be converted to CSS container queries so it responds to its actual container width instead — just ask. ------------------------------------------------------------------------ */ .booking-widget .bw-year-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: calc(var(--bw-rem) * 1); margin-top: calc(var(--bw-rem) * 1); } @media (min-width: 1180px) { .booking-widget .bw-year-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1700px) { .booking-widget .bw-year-grid { grid-template-columns: repeat(6, 1fr); } } @media (max-width: 420px) { .booking-widget .bw-year-grid { grid-template-columns: 1fr; } } .booking-widget .bw-month-card { background: var(--bw-surface); /* border: 1px solid var(--bw-line); */ border-radius: 0px; padding: calc(var(--bw-rem) * 0.8) calc(var(--bw-rem) * 0.8) calc(var(--bw-rem) * 1); } .booking-widget .bw-month-card__title { /*margin: 0 0 calc(var(--bw-rem) * 0.5); */ margin: 0; font-family: var(--bw-font-display); font-weight: 400; font-size: calc(var(--bw-rem) * 1.2); color: var(--bw-surface); text-align: center; background-color: var(--bw-titlebg); text-transform: uppercase; padding: 5px 0; border: 1px solid var(--bw-accent); margin-right: -1px; } .booking-widget .bw-weekdays, .booking-widget .bw-days { display: grid; grid-template-columns: repeat(7, 1fr); } .booking-widget .bw-weekdays span { text-align: center; font-size: calc(var(--bw-rem) * 0.65); letter-spacing: 0.05em; color: var(--bw-ink); padding-bottom: calc(var(--bw-rem) * 0.25); border: 1px solid var(--bw-accent); padding: 10px 0; margin-right: -1px; background-color: var(--bw-bg); font-family: var(--bw-font-display); font-weight: 600; } /* Day cells -------------------------------------------------------------- */ .booking-widget .bw-day { position: relative; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; color: var(--bw-ink); font-size: calc(var(--bw-rem) * 0.95); border-radius: 0px; cursor: default; border: 1px solid var(--bw-accent); margin-top: -1px; margin-right: -1px; } .booking-widget .bw-day--empty { visibility: visible; border: 1px solid var(--bw-accent); } /* Holidays -------------------------------------------------------------- Same shading and gold asterisk as the admin calendar. The tint marks the day; whether it's actually blocked is set per-date in the admin Holidays screen — a blocked one also carries .bw-day--booked, so the strikethrough lands on top of this shading. */ .booking-widget .bw-day--holiday { background-color: var(--bw-holiday); } .booking-widget .bw-day--holiday::before { content: '*'; position: absolute; top: 2px; right: 4px; line-height: 1; font-size: calc(var(--bw-rem) * 1); color: var(--bw-accent); pointer-events: none; } .booking-widget .bw-day__icon { position: absolute; top: 2px; width: 9px; height: 9px; fill: var(--bw-booked); } .booking-widget .bw-day--booked { color: var(--bw-booked); } .booking-widget .bw-day--booked .bw-day__number { position: relative; } /* The signature mark: a thin stamped strikethrough across the date, like a ledger entry that's been crossed off once the day is taken. */ .booking-widget .bw-day--booked .bw-day__number::after { content: ''; position: absolute; left: -3px; right: -3px; top: 50%; border-top: 4px solid var(--bw-booked); transform: rotate(0deg); margin-right:-5px; margin-left:-5px; } /* Footer note ------------------------------------------------------------ */ .booking-widget .bw-footer { text-align: center; color: var(--bw-muted); font-size: calc(var(--bw-rem) * 0.78); margin-top: calc(var(--bw-rem) * 1.25); }