/* The booking form's stylesheet — Zurich → St. Anton (the working copy). * * Lifted out of the component so that changing it rewrites one file instead of every page * that carries the form, and so the ~29 KB stops being inlined into each of them. It is * loaded from by Base.astro, which is handed `bookingCss` by whatever renders a form. * * There is no Astro scoping out here, so every selector must stay inside the form's own * namespace: .bf-*, .dtp-*, .lb-*, .bd-*, plus .ic and .has-dtp, which nothing else on the * site uses. Two exceptions are deliberately global — .dtp-back and body.dtp-full — because * script puts them on . * * Stable filename on purpose: see the Cache-Control override in public/.htaccess. */ .bf { background: linear-gradient(180deg, var(--color-blue) 0%, var(--color-blue-deep) 100%); padding: 2rem 0 2.25rem; /* Not `hidden`: the date panel hangs below its pill and would be sheared off. */ overflow: visible; } .bf * { box-sizing: border-box; } /* Trimmed from 64px to 40px — about 6 mm reclaimed on each side, which is what the row of 9+9+9+4 cm needs to sit inside a 1280px screen without shrinking. */ .bf-form .bf .container { max-width: none; padding: 0 clamp(16px, 2vw, 40px); } .bf-sub { color: rgba(255,255,255,.9); text-align: center; font-size: .95rem; margin: -.7rem 0 1.1rem; } .bf-heading { color: #fff; text-align: center; font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .02em; font-size: clamp(1.15rem, 2.3vw, 1.55rem); line-height: 1.2; margin: 0 0 1.1rem; } @media (max-width: 700px) { .bf-heading { font-size: 1.05rem; margin-bottom: .8rem; } } /* On the booking page the H1 already says "Book your transfer" — the band just labels itself. */ .bf--compact { padding: 1.4rem 0 1.6rem; } .bf-step { color: rgba(255,255,255,.92); font-family: var(--font-head); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; margin: 0 0 .9rem; } /* radios */ .bf-group { display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; } .bf-sep { width: 2px; height: 28px; background: rgba(255,255,255,.75); border-radius: 2px; flex: 0 0 auto; } /* group 2 (service) uses light-blue dots to differ from the orange direction group */ .bf-group--svc .dot { border-color: var(--color-blue); } .bf-group--svc input:checked + .dot { background: var(--color-blue); box-shadow: inset 0 0 0 3px #fff; } /* fields — single line on desktop, roomy */ /* Row A: From ⇅ To, half each. Row B: when, return, passengers, button. */ .bf-fields { display: flex; flex-wrap: nowrap; gap: .8rem; align-items: flex-start; } /* Top, not centre: when "other address" opens a box under one of the two, centring would lift that column's pill above its neighbour. Pinned to the top, both pills stay put. */ .bf-fields--places { align-items: flex-start; } .bf-fields--places .bf-cell { flex: 1 1 0; } .bf-fields--when { margin-top: .7rem; position: relative; } .bf-fields--when .bf-cell--dates, .bf-fields--when .bf-cell--ret, .bf-fields--when .bf-cell--pax { flex: 1.1333 1 0; } .bf-fields--when .bf-book { flex: .60 1 0; } .bf-fields--when.has-gap::after { content: ''; flex: .60 1 0; } /* The swap sits between the two place fields, on the row's centre line. */ .bf-swap { width: 15mm; height: 15mm; flex: 0 0 auto; margin: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; } .bf-swap svg { width: 20px; height: 20px; fill: var(--accent); } .bf-swap:hover { border-color: var(--color-blue); background: var(--color-bg); } /* "+ Add return trip" — a dashed placeholder until it is asked for. */ .bf-addret { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; min-height: 15mm; padding: .5rem .8rem; cursor: pointer; border: 2px dashed var(--color-border); border-radius: 12px; background: rgba(255,255,255,.14); font: inherit; font-size: .95rem; font-weight: 500; color: #fff; } .bf-addret[hidden] { display: none; } .bf-addret:hover { border-color: var(--accent); background: rgba(255,255,255,.24); } .bf-addret svg { width: 20px; height: 20px; fill: currentColor; flex: 0 0 auto; } #bf-ret-pill[hidden] { display: none; } /* A name over each half of the journey, with a rule running out to the edge so the two blocks read as two blocks and not as one long list of fields. */ .bf-leg-h { display: flex; align-items: center; gap: .7rem; margin: 1rem 0 .45rem; font-family: var(--font-head); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #fff; } .bf-leg-h[hidden] { display: none; } .bf-leg-h > span:first-child { flex: 0 0 auto; } .bf-leg-h::after { content: ''; flex: 1 1 auto; height: 1px; background: rgba(255, 255, 255, .3); } .bf-leg-ret[hidden] { display: none; } .bf-cell--ret[hidden] { display: none; } .bf-ret-x { order: 2; flex: 0 0 auto; width: 24px; height: 24px; padding: 0; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18); color: #fff; font-size: 1.05rem; } .bf-ret-x:hover { background: var(--accent); color: #fff; } /* Passengers: minus, number, plus — straight in the field. */ /* One centimetre either side of the number. The three sit as a group at the left of the field, under the label — not shoved into its far corners. */ /* Bounded, not spaced by a fixed gap: 10 mm between each part overflowed the pill on a narrow phone and pushed "+" past the border. The box takes the width it is given, caps itself on a wide screen, and lets the gap absorb whatever is left over. */ .bf-count { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: .4rem; width: 100%; max-width: 34mm; min-width: 0; } .bf-count-b { /* inline-flex, not the button default: otherwise the glyph sits on its baseline near the bottom of the box instead of in the middle of it. */ display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: 0; padding: 0; flex: 0 0 auto; cursor: pointer; line-height: 1; font: inherit; font-size: 1.15rem; font-weight: 700; border: 1px solid var(--color-border); border-radius: 8px; background: #fff; color: var(--navy); } .bf-count-b:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #fff; } .bf-count-b:disabled { color: var(--color-disabled); border-color: var(--color-disabled-bg); cursor: default; } .bf-count .bf-count-n { width: 2.4ch; flex: 0 0 auto; padding: 0; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; } .bf-count-n::-webkit-outer-spin-button, .bf-count-n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Only ever visible in sheet mode; created by script, so it is styled globally. */ .dtp-back { position: fixed; inset: 0; z-index: 99; background: rgba(9, 34, 66, .45); } .dtp-back[hidden] { display: none; } .bf-note { margin: .4rem 0 0; font-size: .84rem; font-weight: 500; color: #ffe6c7; } .bf-note[hidden] { display: none; } /* The running total. Script writes it, so it is empty until then — and an empty paragraph would still push the row below it down by its own margin. */ .bf-note--pax:empty { display: none; } /* ---- passengers: a folded field and the panel behind it ----------------------------- Without script the two number boxes are the field. With it, they are hidden and the button takes their place — one line that says who is travelling. */ #bf-pax.has-pxp .bf-lbl, #bf-pax.has-pxp .bf-pax-native, #bf-pax-ret.has-pxp .bf-lbl, #bf-pax-ret.has-pxp .bf-pax-native { display: none; } .bf-pax-native { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .bf-pax-nl { font-size: .72rem; color: var(--color-muted); font-weight: 500; } .bf-pax-n { width: 3.5rem; } .bf-pax-btn { display: flex; flex-direction: column; justify-content: center; gap: .1rem; width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; color: var(--color-text); } .bf-pax-btn[hidden] { display: none; } /* Same two lines as every other pill: what the field is, then what it says. */ .bf-pax-head { font-size: .82rem; font-weight: 500; line-height: 1.15; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bf-pax-val { font-size: .95rem; line-height: 1.25; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pxp { position: absolute; z-index: 60; top: calc(100% + 10px); left: 0; width: min(320px, calc(100vw - 2rem)); background: #fff; border: 1px solid var(--color-blue); border-radius: 16px; padding: .9rem 1rem 1rem; box-shadow: 0 18px 44px rgba(9, 34, 66, .28); text-align: left; cursor: default; } .pxp[hidden] { display: none; } .pxp-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .55rem .1rem; } .pxp-row + .pxp-row { border-top: 1px solid var(--color-border); } .pxp-t { font-weight: 500; color: var(--navy); font-size: 1rem; } .pxp-t small { display: block; font-weight: 400; font-size: .8rem; color: var(--color-muted); margin-top: .1rem; } .pxp-step { display: inline-flex; align-items: center; gap: .15rem; flex: 0 0 auto; } .pxp-step b { min-width: 2.1rem; text-align: center; font-size: 1.05rem; font-variant-numeric: tabular-nums; color: var(--navy); } /* 40px round targets — a thumb needs them, and the panel has the room the pill did not. */ .pxp-b { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: 0 0 auto; cursor: pointer; line-height: 1; font: inherit; font-size: 1.25rem; font-weight: 700; border: 1px solid var(--color-border); border-radius: 50%; background: #fff; color: var(--navy); } .pxp-b:hover:not(:disabled) { background: var(--color-blue); border-color: var(--color-blue); color: #fff; } .pxp-b:disabled { color: var(--color-disabled); border-color: var(--color-disabled-bg); cursor: default; } @media (hover: none) { /* A tap would leave the last button filled blue, as if it were still pressed. */ .pxp-b:hover:not(:disabled) { background: #fff; border-color: var(--color-border); color: var(--navy); } } .pxp-note { margin: .5rem 0 .8rem; font-size: .8rem; color: var(--color-muted); } .pxp-note:empty { display: none; } .pxp-done { width: 100%; min-height: 44px; cursor: pointer; border: 0; border-radius: 12px; background: var(--color-blue); color: #fff; font: inherit; font-weight: 500; font-size: 1rem; } .pxp-done:hover { background: var(--color-blue-dark); } .bf-dt-val.is-ph { color: var(--color-muted); } /* The shared date panel is positioned against the row, not a single pill. */ .bf-fields--when > .dtp { top: calc(100% + 10px); } /* The cell is the flex item; the pill sits on top of its own error line, so a message appearing underneath pushes nothing sideways. */ .bf-cell { display: flex; flex-direction: column; min-width: 0; } .bf-pill { background: #fff; border-radius: 12px; display: flex; align-items: center; /* 15 mm, fixed, so the band keeps its shape whatever gets chosen. */ padding: 0 .3rem; min-height: 15mm; width: 100%; flex: 0 0 auto; min-width: 0; } /* Pick-up and drop-off carry the longest text on the row — a label that must not wrap and an option like "✈ Friedrichshafen Airport (FDH) 🇩🇪" — so they take the lion's share of the width. Dates are fixed-format and passengers are two small numbers; both give way. */ .bf-field { display: flex; flex-direction: column; justify-content: center; flex: 1; padding: .25rem .6rem; min-width: 0; position: relative; } .bf-field[hidden] { display: none; } /* Sentence case at reading size, not a small-caps micro-label: the reference treats these as the field's own words, and they are the only thing in the field until it is answered. Always one line — a wrapped label would push the pill taller than its neighbours. */ .bf-lbl { color: var(--color-text); font-size: .82rem; font-weight: 500; line-height: 1.15; pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bf-lbl small { font-weight: 500; text-transform: none; letter-spacing: 0; } .bf-input { border: 0; background: transparent; padding: 0; margin: 0; width: 100%; min-width: 0; font: inherit; font-size: .95rem; color: var(--color-text); line-height: 1.25; appearance: none; -webkit-appearance: none; } .bf-input:focus { outline: none; } /* A missing answer is ringed in red inside its white pill, and named underneath it. Fields carry no other rule of their own, so nothing competes with it. */ .bf-field.is-invalid { box-shadow: inset 0 0 0 2px var(--color-error); border-radius: 10px; } .bf-err { margin: .4rem 0 0; padding: .4rem .7rem; border-radius: 8px; background: #fff; border-left: 4px solid var(--color-error); color: var(--color-error); font-size: .84rem; font-weight: 500; line-height: 1.4; } .bf-err[hidden] { display: none; } .bf-err span { display: block; } .bf-err span + span { margin-top: .2rem; } select.bf-input { cursor: pointer; text-overflow: ellipsis; } /* From and To are one line: the word sits at the left, the pin at the right, both centred on the same axis. The word is an overlay on the select, so choosing a place replaces it rather than pushing a second line into the pill. */ /* From / To stack one item per line — the word, then the place, then what kind of place, then its code. A closed