/* =================================================================== LIMODATE — shared date picker ------------------------------------------------------------------- Company neutral and site neutral. Colours resolve from --brand-color where a site defines one, and fall back to a gold that suits the dark themes. Nothing here is declared on :root, so this file cannot reach any other component on the page. To retheme on a single site, set the --ld-* properties on .limodate in that site's own stylesheet. Do not edit this file per site, it is distributed from the core. THE PANEL IS A MODAL, RENDERED ON THE BODY. It used to be an anchored dropdown, which meant it had to survive every ancestor's overflow, background and z-index on every page it landed on, plus banner sliders, floating call rails and chat widgets. It could not. The panel is now moved to the end of when it opens, so it has no ancestors left to fight, and it sits above everything on a deliberately extreme z-index. Because it is no longer a descendant of .limodate, the --ld-* variables set by a host block would not inherit into it. The script copies them onto the panel on open. The defaults are repeated on .limodate__panel below so it is never unstyled if that copy is skipped. =================================================================== */ .limodate { --ld-accent: var(--brand-color, #c9a227); --ld-accent-lite: #f0d78a; --ld-on-accent: #14100a; --ld-panel: #131211; --ld-panel-2: #1b1917; --ld-line: rgba(255, 255, 255, 0.1); --ld-text: #ffffff; --ld-muted: #9d968c; --ld-soft: #6f6a62; --ld-disabled: #48443f; --ld-radius: 14px; --ld-cell: 40px; position: relative; display: block; } .limodate *, .limodate *::before, .limodate *::after, .limodate__panel *, .limodate__panel *::before, .limodate__panel *::after { box-sizing: border-box; } /* ---------------- the field ---------------- */ /* A button, not an input. There is nothing to type, so a text input would promise an interaction that does not exist and would raise the keyboard on a phone for no reason. */ .limodate__trigger { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; height: 32px; padding: 0; border: 0; background: transparent; color: var(--ld-soft); font-family: inherit; font-size: inherit; line-height: 32px; text-align: left; cursor: pointer; } .limodate__trigger.is-filled { color: var(--ld-text); } .limodate__trigger:focus-visible { outline: 2px solid var(--ld-accent); outline-offset: 3px; border-radius: 4px; } .limodate__value { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .limodate__caret { flex: 0 0 8px; width: 8px; height: 8px; margin-bottom: 3px; border-right: 2px solid var(--ld-muted); border-bottom: 2px solid var(--ld-muted); transform: rotate(45deg); transition: transform 0.2s ease; } .limodate.is-open .limodate__caret { transform: rotate(-135deg); margin-bottom: -3px; } /* ---------------- backdrop ---------------- */ .limodate__backdrop { display: none; } .limodate__backdrop.is-shown { display: block; position: fixed; z-index: 2147482999; inset: 0; background: rgba(0, 0, 0, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } /* ---------------- panel ---------------- */ .limodate__panel { /* defaults repeated here: this element is not a descendant of .limodate once it is open, so it inherits none of its variables */ --ld-accent: var(--brand-color, #c9a227); --ld-accent-lite: #f0d78a; --ld-on-accent: #14100a; --ld-panel: #131211; --ld-panel-2: #1b1917; --ld-line: rgba(255, 255, 255, 0.1); --ld-text: #ffffff; --ld-muted: #9d968c; --ld-soft: #6f6a62; --ld-disabled: #48443f; --ld-radius: 14px; --ld-cell: 40px; position: fixed; z-index: 2147483000; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 344px; max-width: calc(100vw - 24px); max-height: calc(100vh - 32px); overflow-y: auto; padding: 18px; border: 1px solid var(--ld-line); border-radius: var(--ld-radius); background: var(--ld-panel); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7); color: var(--ld-text); animation: limodate-in 0.18s ease-out; } .limodate__panel[hidden] { display: none; } @keyframes limodate-in { from { opacity: 0; transform: translate(-50%, -46%); } to { opacity: 1; transform: translate(-50%, -50%); } } /* ---------------- panel head ---------------- */ .limodate__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; } .limodate__nav { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; padding: 0; border: 1px solid var(--ld-line); border-radius: 50%; background: transparent; color: var(--ld-text); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .limodate__nav:hover:not(:disabled), .limodate__nav:focus-visible { border-color: var(--ld-accent); color: var(--ld-accent-lite); outline: none; } .limodate__nav:disabled { color: var(--ld-disabled); cursor: default; } .limodate__nav svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* the month label is itself the way into the month and year view */ .limodate__title { flex: 1 1 auto; min-height: 34px; padding: 0 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ld-text); font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.01em; cursor: pointer; transition: background 0.2s ease, color 0.2s ease; } .limodate__title:hover, .limodate__title:focus-visible { background: var(--ld-panel-2); color: var(--ld-accent-lite); outline: none; } /* ---------------- day grid ---------------- */ .limodate__week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; } .limodate__wd { height: 26px; display: grid; place-items: center; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ld-muted); } .limodate__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .limodate__day { height: var(--ld-cell); padding: 0; border: 1px solid transparent; border-radius: 9px; background: transparent; color: var(--ld-text); font-family: inherit; font-size: 14px; line-height: 1; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .limodate__day:hover:not(:disabled) { background: var(--ld-panel-2); } .limodate__day:focus-visible { outline: none; border-color: var(--ld-accent); } .limodate__day:disabled { color: var(--ld-disabled); cursor: default; } .limodate__day--pad { visibility: hidden; } /* today is outlined, the selection is filled, so the two never compete */ .limodate__day.is-today:not(.is-selected) { border-color: color-mix(in srgb, var(--ld-accent) 55%, transparent); color: var(--ld-accent-lite); } .limodate__day.is-selected { background: var(--ld-accent); border-color: var(--ld-accent); color: var(--ld-on-accent); font-weight: 700; } /* ---------------- month and year view ---------------- */ .limodate__months { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .limodate__month { height: 44px; padding: 0 4px; border: 1px solid transparent; border-radius: 9px; background: var(--ld-panel-2); color: var(--ld-text); font-family: inherit; font-size: 13px; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; } .limodate__month:hover:not(:disabled), .limodate__month:focus-visible { border-color: var(--ld-accent); outline: none; } .limodate__month:disabled { color: var(--ld-disabled); cursor: default; } .limodate__month.is-selected { background: var(--ld-accent); border-color: var(--ld-accent); color: var(--ld-on-accent); font-weight: 700; } /* ---------------- foot ---------------- */ .limodate__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ld-line); } .limodate__link { padding: 8px 2px; border: 0; background: transparent; color: var(--ld-muted); font-family: inherit; font-size: 13px; cursor: pointer; transition: color 0.2s ease; } .limodate__link:hover, .limodate__link:focus-visible { color: var(--ld-accent-lite); outline: none; } .limodate__done { min-height: 40px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--ld-accent); color: var(--ld-on-accent); font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; } .limodate__done:focus-visible { outline: 2px solid var(--ld-accent-lite); outline-offset: 2px; } /* screen reader only, carries the month change announcement */ .limodate__live { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------------- phone: bottom sheet ---------------- */ /* Still a modal, still on the body, just anchored to the bottom edge where a thumb reaches rather than floating in the middle where it does not. */ @media (max-width: 640px) { .limodate__panel.is-sheet { top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; max-height: 88vh; transform: none; padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px)); border: 0; border-top: 1px solid var(--ld-line); border-radius: 18px 18px 0 0; box-shadow: 0 -18px 50px rgba(0, 0, 0, 0.65); animation: limodate-up 0.2s ease-out; } @keyframes limodate-up { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .limodate__panel.is-sheet .limodate__day { height: 46px; font-size: 15px; } .limodate__panel.is-sheet .limodate__nav { flex-basis: 42px; width: 42px; height: 42px; } .limodate__panel.is-sheet .limodate__title { min-height: 42px; font-size: 16px; } .limodate__panel.is-sheet .limodate__done { min-height: 46px; } .limodate__panel.is-sheet .limodate__link { padding: 12px 2px; } } @media (prefers-reduced-motion: reduce) { .limodate__panel, .limodate__panel.is-sheet { animation: none; } .limodate__caret, .limodate__nav, .limodate__title, .limodate__day, .limodate__month, .limodate__link { transition: none; } }