/* * Booking modal shell. design/DESIGN-SYSTEM.md §4.16, motion §6.2/§6.4. * * Overlay (the scrim IS the flex container) → panel → head → step indicator → * body → footer bar. Square corners throughout; the only curve in the design is * the 50% circle, and there is none in here. * * Adopted RECOMMENDs from DESIGN-SYSTEM §8: the "Späť" border collapses from * 0.24 to the 0.20 ghost value (item 11). * * TODO token: the modal's own gutters (clamp(12px,3vw,40px) overlay, * clamp(18px,3vw,32px) head/foot, clamp(20px,3vw,32px) body), the title clamp * (clamp(20px,2.4vw,30px)) and the .3s panel entry are literals here — tokens.css * has no name for any of them. */ .sp-modal { position: fixed; inset: 0; z-index: var(--sp-z-modal); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: clamp(12px, 3vw, 40px); /* TODO token */ background: var(--sp-modal-veil); -webkit-backdrop-filter: var(--sp-blur-modal); backdrop-filter: var(--sp-blur-modal); } /* * The page behind a modal does not scroll. Both elements carry the class on * purpose: base.css gives an overflow-x, which stops the body's overflow * from propagating to the viewport, so locking the body alone would do nothing. */ html.sp-modal-open { overflow: hidden; } body.sp-modal-open { overflow: hidden; } .sp-modal__panel { width: 100%; max-width: var(--sp-modal-max); background: var(--sp-bg); border: 1px solid var(--sp-line-strong); border-radius: var(--sp-radius); animation: riseIn .3s var(--sp-ease) both; /* TODO token: --sp-dur-modal */ } .sp-modal__panel:focus { outline: none; } /* ------------------------------------------------------------------- head */ .sp-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-7) clamp(18px, 3vw, 32px); /* TODO token */ border-bottom: 1px solid var(--sp-line); } .sp-modal__title { margin: 0; font-family: var(--sp-font-display); font-style: italic; font-weight: 900; font-size: clamp(20px, 2.4vw, 30px); /* TODO token */ line-height: var(--sp-lh-display); text-transform: uppercase; color: var(--sp-text); } .sp-modal__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; background: none; border: var(--sp-border-ghost); border-radius: var(--sp-radius); color: var(--sp-text); font-size: 20px; /* TODO token */ line-height: 1; cursor: pointer; transition: border-color var(--sp-dur-fast) var(--sp-ease), color var(--sp-dur-fast) var(--sp-ease); } .sp-modal__close:hover, .sp-modal__close:focus-visible { border-color: var(--sp-red); color: var(--sp-red); } /* -------------------------------------------------------- step indicator */ /* * The step indicator moved to `components/steps.css` when the checkout became * a page: it belongs to the checkout, not to the box the checkout used to sit * in, and the voucher flow that still uses this file has three steps of its own * that want exactly the same bars. */ /* ------------------------------------------------------------------- body */ .sp-modal__body { padding: clamp(20px, 3vw, 32px); /* TODO token */ } .sp-modal__hint { margin: 0 0 var(--sp-8); font-size: var(--sp-fs-xs); line-height: var(--sp-lh-body); color: var(--sp-text-50); } /* * Section label inside the modal: 26px above, 12px below (§11 step 1). The first * one in a panel needs no top gap -- the hint or the panel padding supplies it. */ .sp-modal__field-label { margin: var(--sp-10) 0 var(--sp-3); } .sp-modal__step > .sp-modal__field-label:first-child, .sp-modal__hint + .sp-modal__field-label { margin-top: 0; } /* * The Rider stepper opens the first panel, above the calendar * (.scratch/simpulse-range-picker/spec.md, decision 2). The calendar head * carries no top margin of its own, so the gap between the two blocks is * bought here. */ .sp-modal__step > .sp-stepper { margin-bottom: var(--sp-8); } /* ----------------------------------------------------------------- footer */ .sp-modal__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-6) clamp(18px, 3vw, 32px); /* TODO token */ border-top: 1px solid var(--sp-line); background: var(--sp-surface-sunken); } .sp-modal__note { margin: 0; font-size: var(--sp-fs-sm); color: var(--sp-text-55); } .sp-modal__actions { display: flex; flex-wrap: wrap; gap: 10px; } .sp-modal__back { padding: 13px var(--sp-10); border: var(--sp-border-ghost); font-weight: 700; font-size: var(--sp-fs-md); letter-spacing: 0; } .sp-modal__back:hover, .sp-modal__back:focus-visible { border-color: var(--sp-text); } /* §4.1: the modal's primary button is the one that does not lift on hover. */ .sp-modal__next { padding: 13px var(--sp-11); font-size: var(--sp-fs-md); letter-spacing: var(--sp-ls-pill); } .sp-modal__next:hover, .sp-modal__next:focus-visible { transform: none; box-shadow: none; } @media (prefers-reduced-motion: reduce) { .sp-modal__panel { animation: none; } }