/* ------------------------------------------------------------------ contact-datepicker.css — dark theme + popup chrome for bootstrap-datepicker (uxsolutions v1.10) on the /contact page. The bundled datepicker.min.css is the NON-standalone build: it expects Bootstrap's .dropdown-menu to supply the popup container chrome (position / background / border / shadow). Webority.Web.Design ships no Bootstrap, so this file provides that chrome AND restyles the calendar to match the dark contact page (uses the global tokens from tokens.css). The popup is appended to (container:'body'), so it lives outside the Razor CSS-isolation scope — these rules are intentionally global. ------------------------------------------------------------------ */ /* ===== Popup container chrome (replaces Bootstrap .dropdown-menu) ===== */ .datepicker.dropdown-menu { position: absolute; z-index: 1056; /* above page chrome / cursor layer */ min-width: 17rem; padding: 0.5rem; margin: 0.35rem 0 0; list-style: none; background: var(--color-bg, #0a0a0b); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0.85rem; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55); color: var(--color-fg, #f4f4f5); font-family: var(--font-display, sans-serif); font-size: var(--t-body, 0.95rem); } .datepicker.dropdown-menu table { width: 100%; border-collapse: collapse; } /* The little caret the dropdown draws — recolour to the dark surface. */ .datepicker.datepicker-dropdown.dropdown-menu:before { border-bottom-color: rgba(255, 255, 255, 0.18); } .datepicker.datepicker-dropdown.dropdown-menu:after { border-bottom-color: var(--color-bg, #0a0a0b); } .datepicker.datepicker-dropdown.datepicker-orient-bottom.dropdown-menu:before, .datepicker.datepicker-dropdown.datepicker-orient-bottom.dropdown-menu:after { border-bottom: 0; } /* ===== Header row (‹ month year ›) ===== */ .datepicker.dropdown-menu .datepicker-switch, .datepicker.dropdown-menu .prev, .datepicker.dropdown-menu .next, .datepicker.dropdown-menu thead tr th { color: var(--color-fg, #f4f4f5) !important; background: transparent !important; border-radius: 0.5rem; font-weight: 600; padding: 0.4rem; } .datepicker.dropdown-menu .datepicker-switch:hover, .datepicker.dropdown-menu .prev:hover, .datepicker.dropdown-menu .next:hover, .datepicker.dropdown-menu thead tr th:hover { background: rgba(255, 255, 255, 0.08) !important; } /* Day-of-week labels */ .datepicker.dropdown-menu .dow { color: var(--color-d-text-3, #8a8b90) !important; font-weight: 500; font-size: var(--t-micro, 0.72rem); text-transform: uppercase; letter-spacing: 0.04em; } /* ===== Day / month / year cells ===== */ .datepicker.dropdown-menu td, .datepicker.dropdown-menu th { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 0.5rem; text-align: center; background-image: none !important; } .datepicker.dropdown-menu td.day, .datepicker.dropdown-menu span.month, .datepicker.dropdown-menu span.year, .datepicker.dropdown-menu span.decade, .datepicker.dropdown-menu span.century { color: var(--color-fg, #f4f4f5) !important; background: transparent !important; cursor: pointer; transition: background var(--dur-fast, 0.15s) var(--ease-out, ease); } .datepicker.dropdown-menu td.day:hover, .datepicker.dropdown-menu td.focused, .datepicker.dropdown-menu span.month:hover, .datepicker.dropdown-menu span.year:hover, .datepicker.dropdown-menu span.decade:hover, .datepicker.dropdown-menu span.century:hover { background: rgba(255, 255, 255, 0.10) !important; background-image: none !important; } /* Days outside the current month */ .datepicker.dropdown-menu td.old, .datepicker.dropdown-menu td.new { color: var(--color-d-text-4, #5c5d62) !important; } /* Today */ .datepicker.dropdown-menu td.today, .datepicker.dropdown-menu td.today:hover { color: var(--color-fg, #fff) !important; background: rgba(255, 255, 255, 0.06) !important; background-image: none !important; box-shadow: inset 0 0 0 1px var(--color-primary-50, #8a5cf6); } /* Selected date */ .datepicker.dropdown-menu td.active.day, .datepicker.dropdown-menu td.active.day:hover, .datepicker.dropdown-menu span.month.active, .datepicker.dropdown-menu span.year.active, .datepicker.dropdown-menu span.decade.active, .datepicker.dropdown-menu span.century.active { color: var(--color-white, #fff) !important; background: var(--color-primary-100, #6200ee) !important; background-image: none !important; text-shadow: none; } /* Disabled */ .datepicker.dropdown-menu td.disabled, .datepicker.dropdown-menu td.disabled:hover { color: var(--color-d-text-4, #5c5d62) !important; background: transparent !important; cursor: default; } .datepicker.dropdown-menu span.month, .datepicker.dropdown-menu span.year, .datepicker.dropdown-menu span.decade, .datepicker.dropdown-menu span.century { height: 2.75rem; line-height: 2.75rem; border-radius: 0.5rem; } /* The custom calendar icon becomes interactive (see contact.js). */ .contact-date-clickable { pointer-events: auto !important; cursor: pointer; }