/* * Flatpickr calendar skin — virgo-karma template. * * This is a COLOR / TYPOGRAPHY OVERRIDE LAYER, not a standalone theme. It loads * AFTER the shared airbnb layout theme (which supplies all positioning, sizing, * arrows). Every hard-coded color in that base is re-pointed here at the * template's design tokens, so the calendar inherits the Kelp Teal "Living * Archive" world and follows the visitor across all five color palettes, dark * mode, and the dynamic font-size scale. * * The contact-form pickers run in flatpickr static mode (static:true), so the * calendar renders inside a .flatpickr-wrapper around the field instead of * appended to . The wrapper rule below makes it stretch to the field's * full width inside .contact-form-input-wrap; flatpickr's own * .flatpickr-calendar.static rule positions the calendar below the field. * * Token-first by rule: bare hex/rgb literals would lock the skin to one palette * and break under slate_indigo / clay_terracotta / iron_graphite / olive_archive * and dark mode. The only literals here are shadows (tinted off the ink token) * and a single translucent scrim used to mark the range midpoint. * * The airbnb base also ships element-prefixed selectors (span.flatpickr-day, * span.flatpickr-weekday) whose element+class specificity plain-class rules * cannot beat at any load order. The "Airbnb base parity" section re-declares * exactly those properties at matching specificity so the token values win. * * The calendar always renders LTR (flatpickr core direction), independent of * the page's RTL language direction, so month/day grids never mirror. */ /* ------------------------------------------------------------------ Static-mode wrapper * contact-form date pickers use flatpickr static mode, which wraps the field * in .flatpickr-wrapper (core gives it position:relative; display:inline-block). * Inside .contact-form-input-wrap (a block container) the wrapper must stretch * to the field's full width so the visible altInput keeps the same width as a * plain text field. The calendar itself is positioned by flatpickr's own * .flatpickr-calendar.static rule relative to this wrapper. */ .contact-form-input-wrap > .flatpickr-wrapper { display: block; width: 100%; } /* ------------------------------------------------------------------ Calendar shell * The raised card. The airbnb base draws a 1px ring via four directional box- * shadows + a soft drop shadow. We rebuild the ring from the token border color * so it reads on every palette, and keep the soft drop shadow (tinted, never * pure black) for the raised-card depth the airbnb language promises. */ .flatpickr-calendar { background: var(--card-bg); color: var(--text-color); /* offset ring (token border) + soft drop shadow (ink-tinted, not #000) */ box-shadow: 1px 0 0 var(--border-color), -1px 0 0 var(--border-color), 0 1px 0 var(--border-color), 0 -1px 0 var(--border-color), var(--shadow-lg); border-radius: var(--radius-lg); } /* The little pointer arrow that connects the calendar to its input. The airbnb * base builds it from two stacked transparent-border triangles; the inner color * must match the new card background, the outer the new ring color. */ .flatpickr-calendar.arrowTop:before { border-bottom-color: var(--border-color); } .flatpickr-calendar.arrowTop:after { border-bottom-color: var(--card-bg); } .flatpickr-calendar.arrowBottom:before { border-top-color: var(--border-color); } .flatpickr-calendar.arrowBottom:after { border-top-color: var(--card-bg); } /* ------------------------------------------------------------------ Month header * Month/year title row + prev/next navigation arrows. */ .flatpickr-months .flatpickr-month, .flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month { color: var(--text-ink); fill: var(--text-muted); /* svg chevron fill */ } /* The up-arrow chevrons are interactive — give them a clear hover affordance * tied to the accent (the secondary brand voice), not the primary, so they * don't compete with selected-day emphasis for attention. */ .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: var(--accent-color); fill: var(--accent-color); } /* Month/year numerals — the strongest type in the header, treated as ink. */ .flatpickr-current-month { color: var(--text-ink); font-weight: 600; } .flatpickr-current-month input.cur-year { color: var(--text-ink); } .flatpickr-current-month input.cur-year:focus { /* Focus ring matches the form-field focus language elsewhere in the template */ box-shadow: 0 0 0 1px var(--accent-color); } /* The year dropdown