/* /liveaboard/book only — the booking form. * * THIS IS AYO RAJA AMPAT DIVERS' BOOKING CSS, COPIED (owner, 14 Aug 2026: "this * is not an inspiration prompt, this is a copying same design prompt"). Their * rules live inline in `~/Ayo Divers/public/site.css` around lines 126–260; * here they are in the page-scoped file, because every other page on this site * would otherwise download a stylesheet it never uses. * * WHAT IS NOT HERE, AND WHY: the `.field` vocabulary — the label, the hint, the * input, the focus ring — is ALREADY AYO'S in site.css and has been since the * owners chose it. Repeating it would be two copies of one rule (rule 16's * problem, one level up), so this file styles only what site.css has no opinion * about: the wizard, the trip card, the cabin picker and the review sheet. * * AND SINCE 16 AUGUST 2026, NOR IS THE HALF /apply NOW SHARES. The owner asked * for the application form to carry this page's UI, so the panel, the rail * pills, `.req`, the `.fieldset__*` headings, `.check`, the rental reveal, the * payment box, the declaration and the submit row moved to * public/form-shell.css — same class names, same values, one copy. That file * loads immediately before this one on both pages. Nothing here was retuned to * suit /apply: the palette does the translating, because these pages carry * `.palette-ayo` and /apply does not. * * TOKENS TRANSLATE THEMSELVES. `.palette-ayo` on this page already maps Ayo's * own palette onto this site's token names — `--deep-900` is their `--abyss`, * `--seagrass` their `--turq`, `--seagrass-deep` their `--teal-deep`, * `--clay-deep` their `--coral`, `--shell` their `--paper`. So Ayo's values * arrive by writing this site's names, and no hex is repeated. * * THE BORDERS ARE AYO'S .12 ALPHA, BY THE OWNER'S EXPLICIT DECISION (14 Aug * 2026: "I like the box outlines better in Ayo so make it same"). It was * shipped at .48 first and the trade-off was put to them: at .12 a field's * outline measures 1.28:1 against the page, which is below WCAG 1.4.11's 3:1 * for the boundary of a control — and that outline is the only thing marking * the box, because the fill is --shell-2 on --shell at about 1.05:1. They read * it and chose Ayo's line. That is the answer; it is recorded in plan/16 §6a's * decisions table so nobody reopens it, and this note exists so nobody * "corrects" it back. * * ONE TOKEN DOES IT, which is also how Ayo does it: `--edge-ink` is redeclared * below as `--line-ink`, so the inputs (styled in site.css), the cards, the * step pills and the sheet's close button all take the same line without any * of their own rules changing. * * DELETABLE WITH THE REST OF THE LIVEABOARD (plan/13 Q15) — this file, its * script, the route, two views and two models go together. */ /* AYO'S LINE, ON EVERY EDGE OF THIS PAGE. See the header note: the owner chose it over the heavier one this shipped with. `.palette-ayo` sets `--edge-ink` to .48 for the three liveaboard routes; this file loads after site.css and only on the booking page, so redeclaring at the same specificity overrides it here and nowhere else — the schedules filter bar keeps the heavier line it was given, and can be brought down to match on request. `.sheet` is listed separately because the review sheet is rendered outside `main.palette-ayo` and would otherwise miss the override. */ .palette-ayo, .sheet { --edge-ink: var(--line-ink); } /* ---- Booking wizard ---------------------------------------------------- THE PANEL, THE RAIL AND THE SUBMIT ROW MOVED TO public/form-shell.css on 16 Aug 2026, when /apply took this form's UI and they gained a second user. The class names here are unchanged and so are the values — read that file for the panel box, the rail pills, `.req`, `.fieldset__*`, `.check`, the rental reveal, the payment box and the declaration. What is left below is the liveaboard's alone. Steps are only hidden once booking.js adds .wizard--enhanced, so with JS off the form stays one long page that submits normally. */ .wizard--enhanced .wizard__step { display: none; } .wizard--enhanced .wizard__step.is-active { display: block; animation: stepIn .32s cubic-bezier(.2, .8, .25, 1) both; } @keyframes stepIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* Selected-trip card on step 1. `.trip-card` IS ALSO THE SCHEDULES CARD (site.css), AND THAT COLLISION IS AYO'S TOO — their stylesheet declares the same class twice, a grid for the schedules page and this flex row for the booking form, and the later one wins wherever both load. Ours resolves identically because booking.css loads after site.css. The one thing that leaks either way is the schedules card's `box-shadow`, which this rule does not reset — and neither does theirs, so their booking card carries it and so does ours. Copying the collision is what makes the two pages match; do not "fix" it by renaming or by resetting the shadow. */ .trip-card { display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; background: var(--shell-2); border: 1px solid var(--edge-ink); border-radius: var(--r); padding: 16px 20px; margin-bottom: 8px; } .trip-card__main { display: flex; flex-direction: column; gap: 6px; } .trip-card__main b { font-family: var(--font-display); font-size: 1.08rem; color: var(--deep-900); } .trip-card__meta { display: flex; flex-wrap: wrap; gap: 14px; font-family: var(--font-mono); font-size: .78rem; color: var(--txt-ink); } .trip-card__change { font-size: .84rem; color: var(--seagrass-deep); text-decoration: underline; white-space: nowrap; } .trip-card__change:hover { color: var(--hover-ink); } /* Cabin picker */ .cabin-choice { border: none; padding: 0; margin: 22px 0 0; } .cabin-choice .field-label { margin-bottom: 10px; display: block; } .cabin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; } .cabin-card { position: relative; display: block; cursor: pointer; } .cabin-card input { position: absolute; opacity: 0; width: 1px; height: 1px; } .cabin-card__body { display: flex; flex-direction: column; gap: 6px; height: 100%; background: var(--shell-2); border: 1.5px solid var(--edge-ink); border-radius: var(--r); padding: 16px 18px; transition: border-color .22s, box-shadow .22s, transform .22s; } .cabin-card:hover .cabin-card__body { transform: translateY(-2px); box-shadow: var(--shadow-soft); } .cabin-card input:checked + .cabin-card__body { border-color: var(--clay-deep); box-shadow: 0 0 0 3px rgba(255, 90, 56, .14); } .cabin-card input:focus-visible + .cabin-card__body { outline: 2.5px solid var(--seagrass-deep); outline-offset: 2px; } /* Ayo's placeholder, kept: there is no cabin photograph in either project and rule 22 forbids generating one. An uploaded photo replaces it in the markup. */ .cabin-card__photo { display: grid; place-items: center; aspect-ratio: 4 / 3; border: 1px dashed var(--edge-ink); border-radius: var(--r-sm); background: rgba(3, 23, 29, .03); font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-ink-dim); margin-bottom: 4px; } /* The frame primitive's reasoning applies to an uploaded photo too: size the image against a positioned box, never a percentage of an aspect-ratio height (site.css, "THE FRAME PRIMITIVE"). */ .cabin-card__body picture { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-sm); overflow: hidden; margin-bottom: 4px; } .cabin-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .cabin-card__name { font-family: var(--font-display); font-weight: 700; color: var(--deep-900); } .cabin-card__meta { font-size: .74rem; color: var(--txt-ink-dim); } .cabin-card__price { font-size: 1.02rem; color: var(--seagrass-deep); display: flex; align-items: baseline; gap: 6px; } .cabin-card__price small { font-size: .7rem; color: var(--txt-ink-dim); } /* A cabin style that is full on the chosen departure (owner, 10 Nov 2026): greyed out, a "Full" sign over its picture, and not choosable — the radio is disabled by the server and by public/cabin-choice.js. Only the PICTURE is faded; the words keep their colours so they still read, and the sign is a solid dark pill so it reads over any photograph. */ .cabin-card__body { position: relative; } .cabin-card.is-full { cursor: not-allowed; } .cabin-card.is-full .cabin-card__body { background: var(--shell-3); border-style: dashed; } .cabin-card.is-full:hover .cabin-card__body { transform: none; box-shadow: none; } .cabin-card.is-full picture, .cabin-card.is-full .cabin-card__photo { filter: grayscale(1); opacity: .45; } .cabin-card.is-full .cabin-card__price { color: var(--txt-ink-dim); text-decoration: line-through; } .cabin-card__full { position: absolute; top: 26px; left: 28px; z-index: 1; display: inline-flex; align-items: center; padding: 4px 12px; border-radius: 999px; background: var(--deep-900); color: var(--shell); font-family: var(--font-mono); font-size: .74rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; } /* Each of these sets its own display, which outranks the browser's [hidden] rule — the trap this project keeps recording. */ /* How many spaces (one per person) are still free in this cabin on the chosen departure (client, 10 Nov 2026). --hover-ink and not --clay-deep: the Ayo palette remaps --clay-deep to a coral that is too light to read as text on this card. */ .cabin-card__left { font-size: .74rem; font-weight: 500; color: var(--hover-ink); } .cabin-card__full[hidden], .cabin-card__left[hidden], .cabin-card__price[hidden], .cabin-choice__allfull[hidden] { display: none; } .cabin-choice__allfull { margin: 0 0 12px; } /* THE FILE INPUT IS A CONTROL AND HAS TO BE 44px (rule 21). Ayo ships a bare ``, which the browser renders 26px tall — fine on their site, not against this project's touch-target floor. Padding is the only lever: a height on a file input does not move its button. */ #bookingForm input[type="file"] { padding: 10px 12px; border: 1.5px solid var(--edge-ink); border-radius: var(--r-sm); background: var(--shell-2); font-size: .9rem; color: var(--txt-ink); } /* The equipment reveal, the payment box and the declaration are in public/form-shell.css — /apply has all three too. The `.equipment` prefix those rental rules carried is gone with the move: it only ever matched inside this step, so nothing here changed. */ .wizard__actions #wizardBack { margin-right: auto; } /* `.btn` sets display:inline-flex, which outranks the UA sheet's [hidden] rule — without this the step buttons stay on screen however the JS toggles them. */ .btn[hidden] { display: none; } /* Ayo's outline button. This site has no `.btn--line`; `.btn--quiet` is the nearest thing and carries a different edge token, so the class is declared here rather than the markup being changed away from Ayo's. */ .btn--line { background: none; border: 1.5px solid var(--edge-ink); color: var(--deep-900); } .btn--line:hover { border-color: var(--hover-ink); color: var(--hover-ink); } /* ---- Confirmation sheet ---- */ .sheet { position: fixed; inset: 0; z-index: 120; display: flex; align-items: flex-end; justify-content: center; } .sheet[hidden] { display: none; } .sheet__scrim { position: absolute; inset: 0; background: rgba(3, 23, 29, .62); opacity: 0; transition: opacity .2s; } .sheet.is-open .sheet__scrim { opacity: 1; } .sheet__panel { position: relative; width: min(720px, 100%); max-height: 92vh; display: flex; flex-direction: column; background: var(--shell); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: 0 -18px 60px rgba(3, 23, 29, .34); transform: translateY(18px); opacity: 0; transition: transform .24s cubic-bezier(.2, .8, .25, 1), opacity .2s; } .sheet.is-open .sheet__panel { transform: none; opacity: 1; } .sheet__head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; padding: clamp(20px, 3vw, 28px) clamp(20px, 3vw, 30px) 14px; border-bottom: 1px solid var(--line-ink); } .sheet__head h2 { font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.6rem); color: var(--deep-900); } .sheet__head p { font-size: .9rem; color: var(--txt-ink); margin-top: 4px; } .sheet__close { flex: none; background: none; border: 1px solid var(--edge-ink); border-radius: 50%; /* 44px, not Ayo's 36: rule 21's touch-target floor, and this is the only way out of a modal for a thumb. */ width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; color: var(--deep-900); } .sheet__close .icon { width: 16px; height: 16px; } .sheet__close:hover { border-color: var(--hover-ink); color: var(--hover-ink); } .sheet__body { overflow-y: auto; padding: clamp(16px, 2.4vw, 22px) clamp(20px, 3vw, 30px); flex: 1; -webkit-overflow-scrolling: touch; } .sheet__group + .sheet__group { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line-ink); } .sheet__group h3 { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: var(--seagrass-deep); margin-bottom: 10px; } .sheet__group dl { display: grid; grid-template-columns: minmax(130px, 34%) 1fr; gap: 7px 18px; } .sheet__group dt { font-size: .86rem; color: var(--txt-ink-dim); } .sheet__group dd { font-size: .92rem; color: var(--deep-900); word-break: break-word; } .sheet__foot { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; padding: 16px clamp(20px, 3vw, 30px) clamp(20px, 3vw, 26px); border-top: 1px solid var(--line-ink); background: var(--shell-2); border-radius: 0 0 var(--r-lg) var(--r-lg); } @media (min-width: 721px) { .sheet { align-items: center; padding: 24px; } .sheet__panel { border-radius: var(--r-lg); transform: translateY(10px) scale(.99); } .sheet__foot { border-radius: 0 0 var(--r-lg) var(--r-lg); } } @media (max-width: 600px) { /* The rail's and the action row's own narrow rules are in form-shell.css. */ .sheet__group dl { grid-template-columns: 1fr; gap: 2px 0; } .sheet__group dt { margin-top: 8px; font-size: .78rem; } .wizard__actions #wizardBack { flex: 0 0 auto; } } @media (prefers-reduced-motion: reduce) { .wizard--enhanced .wizard__step.is-active { animation: none; } .sheet__panel, .sheet__scrim { transition: none; } .cabin-card:hover .cabin-card__body { transform: none; } }