/* ═══════════════════════════════════════════════════════════════════════════ Availability calendar — house treatment ─────────────────────────────────────────────────────────────────────────── The widget's own calendar is a competent default: a bordered card, a dense grid of small numbers, form-control nav buttons. It reads as a utility. This restyles it to sit inside the site's language instead — no card chrome, square cells with room to breathe, day numbers in the display face so they match the minimum-stay strip, a continuous clay wash for the selected range and filled ends, and hairlines everywhere a border used to be. Scoped to .gm-cal so the plain widget default is still available elsewhere. SPECIFICITY NOTE: the widget's CSS is injected into by its own script at runtime, so it lands AFTER the theme's stylesheets and wins any tie. Every rule here is deliberately one class deeper than the widget's equivalent. ═══════════════════════════════════════════════════════════════════════════ */ .gm-cal { --cal-line: rgba(233, 222, 203, 0.14); --cal-wash: color-mix(in srgb, var(--gm-clay) 22%, transparent); } /* ── Strip the card ─────────────────────────────────────────────────────── */ .gm-cal .bw-card { background: transparent; border: 0; box-shadow: none; padding: 0; max-width: none; margin: 0; } /* The property name is already the section heading above, so the widget's own title is a duplicate. */ .gm-cal .bw-title { display: none; } /* ── Month header ───────────────────────────────────────────────────────── */ .gm-cal .bw-cal-header, .gm-cal .bw-cal-header--two { margin-bottom: 1.6rem; gap: clamp(1rem, 4vw, 3.5rem); } .gm-cal .bw-cal-month { font-family: var(--gm-font-display); font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 600; letter-spacing: -0.02em; color: var(--gm-canvas); text-align: center; } .gm-cal .bw-cal-nav { width: 40px; height: 40px; border: 1px solid var(--cal-line); border-radius: 999px; background: transparent; color: var(--gm-canvas); font-size: 1rem; opacity: 0.7; transition: opacity 0.2s var(--gm-ease), border-color 0.2s var(--gm-ease); } .gm-cal .bw-cal-nav:hover { background: transparent; border-color: var(--gm-canvas); opacity: 1; } /* ── The grid ───────────────────────────────────────────────────────────── */ .gm-cal .bw-cal-grids { gap: clamp(1.5rem, 4vw, 3.5rem); } .gm-cal .bw-cal-grid { gap: 0; /* the wash has to run unbroken across a range */ border-top: 1px solid var(--cal-line); } .gm-cal .bw-cal-weekday { font-family: var(--gm-font-mono); font-size: 0.5625rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gm-muted-on-dark); padding: 0.85rem 0 0.9rem; } .gm-cal .bw-cal-day { position: relative; /* Wider than tall. Square cells look generous in isolation but make a six-row month ~570px deep, which lets the calendar dominate the page. */ aspect-ratio: 1.45; display: grid; place-content: center; padding: 0; border-radius: 0; font-family: var(--gm-font-display); font-size: clamp(0.85rem, 1.05vw, 1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--gm-canvas); transition: color 0.18s var(--gm-ease); } /* Hover is a hairline ring rather than a fill, so the grid stays calm. */ .gm-cal .bw-cal-day::before { content: ""; position: absolute; /* Kept circular by insetting from the height, not the box. */ top: 8%; bottom: 8%; left: 50%; translate: -50% 0; aspect-ratio: 1; border-radius: 999px; border: 1px solid transparent; transition: border-color 0.18s var(--gm-ease); pointer-events: none; } .gm-cal .bw-cal-day:hover:not(.bw-cal-day--blocked):not(.bw-cal-day--past):not(.bw-cal-day--empty)::before { border-color: rgba(233, 222, 203, 0.4); } .gm-cal .bw-cal-day:hover:not(.bw-cal-day--blocked):not(.bw-cal-day--past):not(.bw-cal-day--empty) { background: transparent; } .gm-cal .bw-cal-day--empty { background: transparent; } .gm-cal .bw-cal-day--past { color: rgba(233, 222, 203, 0.22); } /* Blocked reads as struck through — clearer than a red dot and quieter. */ .gm-cal .bw-cal-day--blocked { color: rgba(233, 222, 203, 0.3); } .gm-cal .bw-cal-day--blocked::after { content: ""; position: absolute; left: 30%; right: 30%; top: 50%; height: 1px; background: rgba(233, 222, 203, 0.35); border-radius: 0; width: auto; margin: 0; } /* Today gets a small mark under the number instead of bold weight. */ .gm-cal .bw-cal-day--today { font-weight: 600; } .gm-cal .bw-cal-day--today::after { content: ""; position: absolute; left: 50%; bottom: 18%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: var(--gm-clay-lit); margin: 0; } /* ── Selection ──────────────────────────────────────────────────────────── */ /* The nights between the two ends: one continuous wash. */ .gm-cal .bw-cal-day--in-range { background: var(--cal-wash); border-radius: 0; color: var(--gm-canvas); } /* The two ends: filled clay discs, with the wash squared off on the inner side so the band joins them rather than floating. */ .gm-cal .bw-cal-day--selected { /* The wash carries through the end cells too, so the band reads as one continuous run with a disc at each end rather than three separate shapes. The widget gives both ends the same class, so this overshoots by half a cell at each outer edge — which is what most date pickers do anyway. */ background: var(--cal-wash); color: var(--gm-canvas); font-weight: 700; } .gm-cal .bw-cal-day--selected::before { top: 5%; bottom: 5%; background: var(--gm-clay); border-color: var(--gm-clay); } .gm-cal .bw-cal-day--selected .bw-cal-day-num, .gm-cal .bw-cal-day--selected .bw-cal-rate { position: relative; z-index: 1; color: #FFF6EF; } /* ── Rates, when shown ──────────────────────────────────────────────────── */ .gm-cal .bw-cal-day-num { line-height: 1.1; } .gm-cal .bw-cal-rate { font-family: var(--gm-font-mono); font-size: 0.4375rem; letter-spacing: 0.08em; color: var(--gm-muted-on-dark); margin-top: 0.2rem; } /* ── The check-in / check-out summary ───────────────────────────────────── */ .gm-cal .bw-cal-selection { background: transparent; border: 0; border-top: 1px solid var(--cal-line); border-radius: 0; padding: 1.4rem 0 0; margin-top: 1.6rem; } .gm-cal .bw-cal-selection .bw-label { font-family: var(--gm-font-mono); font-size: 0.5rem; letter-spacing: 0.2em; color: var(--gm-muted-on-dark); } .gm-cal .bw-cal-sel-date { font-family: var(--gm-font-display); font-size: 1.1rem; font-weight: 600; letter-spacing: -0.02em; color: var(--gm-canvas); margin-top: 0.35rem; } .gm-cal .bw-hint { font-family: var(--gm-font-mono); font-size: 0.5625rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gm-muted-on-dark); margin: 1rem 0 0; } /* ── The book button ────────────────────────────────────────────────────── */ .gm-cal .bw-btn-book { border-radius: 999px; font-family: var(--gm-font-mono); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 1rem 1.6rem; margin-top: 1.6rem; background: var(--gm-clay); color: #FFF6EF; transition: background 0.22s var(--gm-ease), transform 0.22s var(--gm-ease); } .gm-cal .bw-btn-book:not(:disabled):hover { background: var(--gm-clay-lit); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .gm-cal .bw-btn-book:not(:disabled):hover { transform: none; } } /* ── Narrow screens ────────────────────────────────────────────────────── */ @media (max-width: 540px) { /* The two month grids stack at this width rather than sitting side by side, so each one has the full column: 49px cells. The old 7px weekday row was sized for the two-up layout and is simply too small here. */ .gm-cal .bw-cal-weekday { font-size: 0.625rem; letter-spacing: 0.1em; } .gm-cal .bw-cal-day { font-size: 0.875rem; } .gm-cal .bw-cal-selection .bw-label { font-size: 0.625rem; letter-spacing: 0.16em; } .gm-cal .bw-hint { font-size: 0.625rem; } }