/* * Flatpickr calendar skin — virgo-rudra 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 broadsheet-editorial * world (Lisbon steel blue + Lisbon orange, pure-white frameless surfaces, * hairline rules) and follows the visitor across all 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. * The only literals here are shadows (tinted off the ink token). * * 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 Rudra date mark differs from Karma's softer Living Archive in three ways: * tighter corners (broadsheet uses sharp hairlines, not rounded cards), an * orange tick rather than an outline for "today" (echoing the orange accent rule * under section titles across the template), and a hairline-only range corridor. * * 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 frameless editorial card. Rudra surfaces are pure white with hairline * rules rather than raised, so we replace the airbnb box-shadow ring with a * single hairline border in the token border color, plus a soft ink-tinted drop * shadow for the lift the floating calendar needs. Tight corners match the * broadsheet radius scale. */ .flatpickr-calendar { background: var(--card-bg); color: var(--text-color); border: var(--rule-w) solid var(--border-color); /* pure soft drop shadow — no directional ring, frameless editorial */ box-shadow: var(--shadow-lg); border-radius: var(--radius-sm); } /* The little pointer arrow. Rudra draws the card with a hairline border, so the * arrow's outer triangle is the border color and the inner is the card fill. */ .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. In the broadsheet voice the * header is ink-dominant and quiet; the nav arrows are the only interactive * chrome, and they take the steel-blue primary on hover. */ .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 */ } .flatpickr-months .flatpickr-prev-month:hover, .flatpickr-months .flatpickr-next-month:hover { color: var(--primary-color); fill: var(--primary-color); } /* Month/year numerals — broadsheet headings are ink and confident. */ .flatpickr-current-month { color: var(--text-ink); font-weight: 700; letter-spacing: -0.01em; /* matches the template's heading tracking */ } .flatpickr-current-month input.cur-year { color: var(--text-ink); font-weight: 700; } .flatpickr-current-month input.cur-year:focus { box-shadow: 0 0 0 1px var(--primary-color); } /* Year