.roal-flow { /* #076f68 on white ≈ 5.6:1 — the previous #0a8a82 was ≈4.2:1 with white button text, below the WCAG AA 4.5:1 floor for normal-size text. */ --roal-accent: #076f68; --roal-accent-dark: #05564f; --roal-text: #1a1a1a; --roal-muted: #6b7280; --roal-border: #e5e7eb; --roal-danger: #b91c1c; --roal-success: #047857; --roal-bg: #ffffff; --roal-radius: 8px; font-family: inherit; color: var(--roal-text); width: 100%; margin: 0 auto; } .roal-flow * { box-sizing: border-box; } /* Cart timer banner — sticky at the BOTTOM of the viewport, red, prominent */ .roal-timer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99999; background: #b91c1c; color: white; /* Add safe-area inset so iOS home-indicator / Android nav bar doesn't cover the timer content on mobile. Falls back to a flat .75rem on browsers that don't support env(). */ padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); /* Shadow casts upward since the bar now sits at the bottom of the viewport. */ box-shadow: 0 -4px 16px rgba(0, 0, 0, .15); font-weight: 600; } .roal-timer__inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .roal-timer__left { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .roal-timer__icon { font-size: 1.2rem; } .roal-timer__label { font-weight: 500; } .roal-timer__value { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 1.5rem; font-weight: 800; background: rgba(255, 255, 255, .15); padding: .15rem .6rem; border-radius: 6px; letter-spacing: 1px; min-width: 4ch; text-align: center; } .roal-timer__cancel-form { margin: 0; } .roal-timer__cancel { background: white; color: #b91c1c; border: 0; padding: .45rem 1rem; border-radius: 6px; font-weight: 700; font-size: .9rem; cursor: pointer; font-family: inherit; } .roal-timer__cancel:hover, .roal-timer__cancel:focus { background: #fef2f2; } .roal-timer--warning { background: #c2410c; } /* Pulse a few times to draw the eye, then hold steady — an infinite pulse next to the card-entry form is stress, not information. */ .roal-timer--critical { background: #7f1d1d; animation: roal-pulse 1s 4; } @keyframes roal-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } } @media (prefers-reduced-motion: reduce) { .roal-timer--critical { animation: none; } } /* Active / expired states — the JS swaps to expired IN PLACE at 0:00 (no redirect), mirroring the global banner in cart-timer.css. */ .roal-timer__active, .roal-timer__expired { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; width: 100%; } .roal-timer__expired { display: none; } .roal-timer--expired .roal-timer__active { display: none; } .roal-timer--expired .roal-timer__expired { display: flex; } .roal-timer--expired { background: #4b5563; animation: none; } .roal-timer__continue { background: white; color: #1a1a1a; text-decoration: none; padding: .45rem 1rem; border-radius: 6px; font-weight: 700; font-size: .9rem; } .roal-timer__continue:hover, .roal-timer__continue:focus { background: #f3f4f6; } /* Screen-reader-only utility (timer announcements etc.). */ .roal-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* The inline spacer used to push content below the top-bar timer. Now that the timer sits at the bottom, hide the legacy spacer and instead push the bottom of the page up by adding padding-bottom to when a timer is present. */ .roal-timer__spacer { display: none; } /* --roal-timer-h is the bar's real measured height (published by cart-timer.js); the px values are no-JS fallbacks. The bar wraps to multiple rows on narrow screens, where the old static padding left controls buried underneath it. */ body:has(.roal-timer) { padding-bottom: calc(var(--roal-timer-h, 64px) + 16px + env(safe-area-inset-bottom, 0px)); } /* Keyboard focus must land clear of the bar, not underneath it. */ body:has(.roal-timer) a, body:has(.roal-timer) button, body:has(.roal-timer) input, body:has(.roal-timer) select, body:has(.roal-timer) textarea { scroll-margin-bottom: calc(var(--roal-timer-h, 64px) + 16px); } @media (max-width: 480px) { .roal-timer__value { font-size: 1.25rem; } body:has(.roal-timer) { padding-bottom: calc(var(--roal-timer-h, 96px) + 16px + env(safe-area-inset-bottom, 0px)); } } .roal-stepper { display: flex; gap: .5rem; margin-bottom: 2rem; flex-wrap: wrap; } .roal-stepper__item { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--roal-radius); font-size: .9rem; background: #f3f4f6; color: var(--roal-muted); } .roal-stepper__item--current { background: var(--roal-accent); color: white; } .roal-stepper__item--done { background: #d1fae5; color: var(--roal-success); } .roal-stepper__n { display: inline-flex; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(255,255,255,.25); align-items: center; justify-content: center; font-weight: bold; font-size: .8rem; } .roal-stepper__item--upcoming .roal-stepper__n { background: #e5e7eb; color: var(--roal-muted); } .roal-notice { padding: .75rem 1rem; border-radius: var(--roal-radius); margin-bottom: 1.5rem; } .roal-notice--success { background: #d1fae5; color: var(--roal-success); } .roal-notice--error { background: #fee2e2; color: var(--roal-danger); } .roal-muted { color: var(--roal-muted); font-size: .9rem; } .roal-error { color: var(--roal-danger); } .roal-price { font-size: 1.1rem; font-weight: 600; color: var(--roal-accent); } .roal-fineprint { font-size: .8rem; color: var(--roal-muted); margin: 1rem 0; } .roal-btn { display: inline-block; padding: .65rem 1.2rem; border-radius: var(--roal-radius); background: var(--roal-accent); color: white; border: 1px solid var(--roal-accent); font-weight: 500; text-decoration: none; cursor: pointer; font-family: inherit; font-size: 1rem; transition: background 120ms ease; } .roal-btn:hover, .roal-btn:focus { background: var(--roal-accent-dark); color: white; } .roal-btn:disabled { opacity: .5; cursor: not-allowed; } .roal-btn--secondary { background: white; color: var(--roal-text); border-color: var(--roal-border); } .roal-btn--secondary:hover, .roal-btn--secondary:focus { background: #f9fafb; color: var(--roal-text); } /* "View ride" (sold-out card): green accent border like "Select ride", white background. */ .roal-ride-card .roal-btn--secondary { border-color: var(--roal-accent); } .roal-ride-card .roal-btn--secondary:hover, .roal-ride-card .roal-btn--secondary:focus { border-color: var(--roal-accent); background: white; } .roal-btn--primary { background: var(--roal-accent); } .roal-btn--link { background: none; border: none; color: var(--roal-danger); padding: 0; text-decoration: underline; } .roal-cart-summary { background: #f3f4f6; padding: .75rem 1rem; border-radius: var(--roal-radius); margin-bottom: 1.5rem; } /* Rides toolbar (filter + sort) */ .roal-rides-toolbar { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; padding: 1rem; background: #f9fafb; border-radius: var(--roal-radius); margin-bottom: 1.5rem; } .roal-rides-toolbar__field { display: flex; flex-direction: column; gap: .25rem; flex: 1 1 220px; } .roal-rides-toolbar__label { font-size: .8rem; color: var(--roal-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; } .roal-rides-toolbar select { padding: .55rem .75rem; border: 1px solid var(--roal-border); border-radius: 6px; font-size: 1rem; background: white; font-family: inherit; } .roal-rides-toolbar__count { font-size: .85rem; color: var(--roal-muted); margin-left: auto; align-self: center; } /* Ride grid — 4 columns on desktop, scales down responsively */ .roal-ride-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 576px) { .roal-ride-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 768px) { .roal-ride-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1100px) { .roal-ride-grid { grid-template-columns: repeat(4, 1fr); } } .roal-ride-card { background: white; border: 1px solid var(--roal-border); border-radius: var(--roal-radius); overflow: hidden; display: flex; flex-direction: column; position: relative; } .roal-ride-card__image { background-size: cover; background-position: center; aspect-ratio: 16/10; background-color: #f3f4f6; } .roal-ride-card__image--placeholder { display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .roal-ride-card__image--placeholder img { max-width: 78%; max-height: 70%; width: auto; height: auto; object-fit: contain; opacity: .9; } .roal-ride-card__body { padding: 1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; } .roal-ride-card__body h3 { margin: 0 0 .25rem; font-size: 1.1rem; } .roal-ride-card__body .roal-btn { margin-top: auto; align-self: flex-start; } /* Dim the image only — fading the whole card dropped its text below AA contrast. */ .roal-ride-card.is-sold-out .roal-ride-card__image { filter: grayscale(1); opacity: .6; } .roal-ride-card.is-featured { box-shadow: 0 0 0 2px var(--roal-accent), 0 4px 12px rgba(10, 138, 130, .2); } .roal-ride-card__featured-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--roal-accent); color: white; padding: 4px 10px; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); } .roal-rides-empty { grid-column: 1 / -1; text-align: center; padding: 2rem; color: var(--roal-muted); background: #f9fafb; border-radius: var(--roal-radius); } /* Detail */ .roal-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } @media (max-width: 720px) { .roal-detail { grid-template-columns: 1fr; } } /* height:auto is load-bearing: wp_get_attachment_image emits fixed width/height attributes, and without it the attribute height survives while the width scales to the column — stretching every photo. */ .roal-detail__image img { width: 100%; height: auto; border-radius: var(--roal-radius); } .roal-detail__image--placeholder { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/10; background-color: #f3f4f6; border-radius: var(--roal-radius); padding: 2rem; } .roal-detail__image--placeholder img { width: auto; max-width: 75%; max-height: 100%; object-fit: contain; opacity: .9; } .roal-detail__left { display: flex; flex-direction: column; gap: 1rem; } /* Fade carousel */ .roal-carousel { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: var(--roal-radius); overflow: hidden; background: #f3f4f6; } .roal-carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease-in-out; } .roal-carousel__slide.is-active { opacity: 1; } .roal-carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; } .roal-carousel__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; pointer-events: none; } /* 24×24 hit area (WCAG 2.5.8 target size) with a small visual dot inside — 10px buttons were near-impossible on touch. */ .roal-carousel__dots button { pointer-events: auto; width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .roal-carousel__dots button::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .5); transition: background 200ms, transform 200ms; } .roal-carousel__dots button:hover::after { background: rgba(255, 255, 255, .8); } .roal-carousel__dots button.is-active::after { background: white; transform: scale(1.2); } .roal-carousel__dots button:focus-visible { outline: 2px solid white; outline-offset: 1px; } .roal-carousel__pause { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .45); color: white; font-size: .85rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .roal-carousel__pause:hover, .roal-carousel__pause:focus-visible { background: rgba(0, 0, 0, .65); } .roal-carousel__pause:focus-visible { outline: 2px solid white; outline-offset: 1px; } .roal-detail__description { line-height: 1.6; color: var(--roal-text); font-size: .95rem; } .roal-detail__description p { margin: 0 0 .85em; } .roal-detail__description p:last-child { margin-bottom: 0; } .roal-detail__form fieldset { border: 1px solid var(--roal-border); border-radius: var(--roal-radius); padding: 1rem; margin: 1rem 0; } .roal-detail__form legend { padding: 0 .5rem; font-weight: 600; } .roal-detail__form label { display: block; margin-bottom: .75rem; font-size: .95rem; } .roal-detail__form input[type="text"], .roal-detail__form input[type="number"], .roal-detail__form select { width: 100%; box-sizing: border-box; padding: .5rem .75rem; border: 1px solid var(--roal-border); border-radius: 6px; font-size: 1rem; font-family: inherit; background-color: #fff; color: var(--roal-text); line-height: 1.4; } .roal-detail__form select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2rem; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%236b7280' stroke-width='1.5' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; } .roal-detail__form input:focus, .roal-detail__form select:focus { outline: none; border-color: var(--roal-accent); box-shadow: 0 0 0 3px rgba(0, 0, 0, .06); } .roal-detail__form .roal-passenger-grid { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-bottom: .75rem; align-items: stretch; } .roal-detail__form .roal-passenger-grid > label { flex: 1 1 0; min-width: 0; margin-bottom: 0; display: flex; flex-direction: column; } .roal-detail__form .roal-passenger-grid > label > select, .roal-detail__form .roal-passenger-grid > label > .roal-height-group { margin-top: auto; } /* Height spans two columns so its ft + in selects sit together as one unit. */ .roal-detail__form .roal-passenger-grid > .roal-field--height { flex-grow: 2; } .roal-passenger-limits { margin: -.25rem 0 .75rem; font-size: .85rem; color: var(--roal-muted); } .roal-passenger-disclaimer { margin: .25rem 0 .5rem; } .roal-passenger-disclaimer p { margin: 0 0 .5em; } .roal-passenger-disclaimer p:last-child { margin-bottom: 0; } .roal-detail__form .roal-height-group { display: flex; gap: .4rem; } .roal-detail__form .roal-height-group select { flex: 1 1 0; min-width: 0; width: auto; } /* Light vertical divider between Age | Height | Weight. */ .roal-detail__form .roal-passenger-grid > label + label { border-left: 1px solid var(--roal-accent); padding-left: 1.25rem; } @media (max-width: 575.98px) { .roal-detail__form .roal-passenger-grid { gap: .75rem; } .roal-detail__form .roal-passenger-grid > label { flex-basis: 100%; } .roal-detail__form .roal-passenger-grid > label + label { border-left: 0; padding-left: 0; } } .roal-session-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; } @media (max-width: 575.98px) { .roal-session-grid { grid-template-columns: repeat(2, 1fr); } } .roal-session { border: 1px solid var(--roal-border); border-radius: 6px; padding: .6rem .75rem; cursor: pointer; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2px .5rem; font-size: .95rem; background: white; } .roal-session:has(input:checked) { border-color: var(--roal-accent); background: #e6f7f6; } /* The radio itself is visually hidden, so the tile MUST show keyboard focus — without this a keyboard user has no idea which slot they're on. */ .roal-session:has(input:focus-visible) { outline: 2px solid var(--roal-accent); outline-offset: 2px; } .roal-session.is-disabled { background: #f3f4f6; color: var(--roal-muted); cursor: not-allowed; } /* Visually hide the radio but keep it focusable for browser form validation. */ .roal-session input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; margin: 0; } /* nowrap + flex:none: the badge text ("IN YOUR ORDER") must never break mid-phrase — when the tile is too narrow the whole badge drops to its own line via the tile's flex-wrap instead. */ .roal-session__badge { font-size: .7rem; background: var(--roal-danger); color: white; padding: 2px 6px; border-radius: 4px; white-space: nowrap; flex: none; } .roal-session.is-disabled .roal-session__badge { background: var(--roal-muted); } /* Badge backgrounds must hold 4.5:1 against their white text — #10b981 (≈2.5:1) and #d97706 (≈3.2:1) failed badly at this size. */ .roal-session--mine { background: #ecfdf5; border-color: #10b981; } .roal-session--mine .roal-session__badge { background: #047857; } .roal-session--pending { background: #fef3c7; } .roal-session--pending .roal-session__badge { background: #92400e; } .roal-session--sold { background: #fee2e2; } .roal-session--sold .roal-session__badge { background: #b91c1c; } .roal-recall { font-size: .9rem; margin-bottom: 1rem; } .roal-recall .roal-btn { margin-right: .25rem; font-size: .85rem; padding: .35rem .65rem; } /* Review */ .roal-review__item { display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; padding: 1rem; border: 1px solid var(--roal-border); border-radius: var(--roal-radius); margin-bottom: .5rem; align-items: start; } .roal-review__price { font-weight: 600; } .roal-review__passenger { margin-top: .5rem; } .roal-review__pdetails { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: .25rem 0 0; font-size: .9rem; } .roal-review__pdetails dt { color: var(--roal-muted); margin: 0; font-weight: normal; } .roal-review__pdetails dd { margin: 0; } .roal-review__totals { display: flex; justify-content: space-between; padding: 1rem; font-size: 1.1rem; font-weight: 600; border-top: 1px solid var(--roal-border); margin-top: 1rem; } .roal-review__promo { display: flex; gap: .5rem; align-items: end; margin: 1rem 0; } .roal-review__promo label { flex: 1; } .roal-review__promo input { width: 100%; padding: .5rem .75rem; border: 1px solid var(--roal-border); border-radius: 6px; font-size: 1rem; font-family: inherit; } .roal-review__actions { display: flex; gap: .5rem; margin-top: 1.5rem; justify-content: flex-end; } /* Purchaser form */ .roal-purchaser-form { max-width: 480px; } .roal-purchaser-form label { display: block; margin-bottom: 1rem; } .roal-purchaser-form input { width: 100%; padding: .6rem .75rem; border: 1px solid var(--roal-border); border-radius: 6px; font-size: 1rem; font-family: inherit; } /* Pay */ .roal-pay { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } @media (max-width: 720px) { .roal-pay { grid-template-columns: 1fr; } } /* Desktop: contact + card form LEFT, order total RIGHT. The DOM keeps the summary first so the single-column mobile stack still leads with the total. */ @media (min-width: 721px) { .roal-pay > #roal-payment-form { order: 1; } .roal-pay > .roal-pay__summary { order: 2; } .roal-pay > p { order: 3; } } .roal-pay__summary { padding: 1.5rem; background: #f9fafb; border-radius: var(--roal-radius); } .roal-pay__total { font-size: 1.2rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--roal-border); } #roal-payment-element { margin-bottom: 1rem; } /* Merged contact + payment form: same fieldset treatment as the detail step. */ #roal-payment-form fieldset { border: 1px solid var(--roal-border); border-radius: var(--roal-radius); padding: 1rem; margin: 0 0 1rem; } #roal-payment-form legend { padding: 0 .5rem; font-weight: 600; } /* Confirm */ .roal-confirm__code { background: #f3f4f6; padding: 1rem 1.5rem; border-radius: var(--roal-radius); margin: 1.5rem 0; } .roal-confirm__code-value { font-family: ui-monospace, monospace; font-size: 1.8rem; letter-spacing: 2px; font-weight: 600; } .roal-confirm__items { list-style: none; padding: 0; } .roal-confirm__items li { padding: 1rem; border: 1px solid var(--roal-border); border-radius: var(--roal-radius); margin-bottom: .5rem; } /* ===== Print: turn the confirmation page into a clean receipt ===== */ @media print { /* Hide theme chrome and anything tagged as no-print. */ .cardel-header, .cardel-footer, .cardel-cta, .roal-timer, .roal-stepper, .no-print, .roal-confirm__actions { display: none !important; } body { background: #fff !important; color: #000 !important; } .roal-flow, .roal-confirm { max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .roal-confirm__code { border: 1px solid #000 !important; background: #fff !important; page-break-inside: avoid; } .roal-confirm__items li { page-break-inside: avoid; border-color: #999 !important; } a { color: inherit !important; text-decoration: none !important; } @page { margin: 14mm; } } /* ============================================================ 2026 REDESIGN: ride listing cards. Restyles the existing markup to match the approved comp's .car card. CSS only, on purpose: rides.php is on the booking path, so the template, its data attributes and the filter JS hooks are left untouched. Mapping from this template to the comp: .roal-ride-card -> .car square, 1px #EAE6DF hairline .roal-price -> .tag red angled price badge, top left .roal-ride-card__featured-badge -> .tag-featured navy angled badge, top right .roal-availability -> .avail tinted pill, red when nearly gone .roal-btn -> .btn-select full width outlined navy button ============================================================ */ .roal-ride-grid { gap: 18px; } .roal-ride-card { border-radius: 0; border: 1px solid #EAE6DF; box-shadow: none; overflow: visible; /* the angled badges sit flush to the card edge */ } .roal-ride-card__image { aspect-ratio: 16/10; border-radius: 0; } /* Featured: the comp marks it with a navy corner badge, not a coloured ring. */ .roal-ride-card.is-featured { box-shadow: none; border-color: #EAE6DF; } .roal-ride-card__featured-badge { position: absolute; top: 0; right: 0; left: auto; bottom: auto; z-index: 2; background: #0F213E; color: #fff; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 14px; letter-spacing: .06em; line-height: 1.1; padding: 7px 14px 7px 18px; border-radius: 0; clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%); } .roal-ride-card__body { padding: 16px 20px 20px; gap: 0; } .roal-ride-card__body h3 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; color: #0F213E; font-size: 22px; line-height: 1.02; letter-spacing: .005em; margin: 0 0 3px; } .roal-ride-card__body .roal-muted { color: #4B5563; font-size: 14px; margin: 0 0 2px; } .roal-ride-card__body .roal-muted strong { font-weight: 600; color: #4B5563; } /* Price becomes the red corner tag over the photo, as in the comp. */ .roal-ride-card .roal-price { position: absolute; top: 0; left: 0; z-index: 2; margin: 0; background: #BC212D; color: #fff; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 16px; line-height: 1.1; padding: 7px 18px 7px 14px; clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%); } /* Availability pill. Turns red once a ride is nearly gone or sold out. */ .roal-ride-card .roal-availability { display: inline-block; align-self: flex-start; margin: 10px 0 0; background: #EAF6F7; color: #0E6F77; font-size: 13px; font-weight: 600; padding: 5px 12px; border-radius: 999px; } .roal-ride-card.is-sold-out .roal-availability { background: #FBEDEE; color: #BC212D; } .roal-ride-card.is-sold-out .roal-availability strong { font-weight: 700; } /* Select ride: full width outlined navy, matching .btn-select. */ .roal-ride-card__body .roal-btn { display: inline-flex; align-items: center; justify-content: center; width: 100%; align-self: stretch; min-height: 44px; margin-top: 14px; padding: 9px 20px; border-radius: 0; background: transparent; color: #0F213E; border: 2px solid #0F213E; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 17px; letter-spacing: .04em; transition: background 160ms ease, color 160ms ease; } .roal-ride-card__body .roal-btn:hover, .roal-ride-card__body .roal-btn:focus { background: #0F213E; color: #fff; border-color: #0F213E; } .roal-ride-card .roal-btn--secondary, .roal-ride-card .roal-btn--secondary:hover, .roal-ride-card .roal-btn--secondary:focus { color: #4B5563; border-color: #C9C4BC; background: #F4F2EE; } /* ------------------------------------------------------------ Checkout stepper, restyled to the 2026 design language. The comp's .stepper lives inside a navy band; this one sits on a light background, so it takes the same grammar (square tiles, 3px accent rule on top, display-italic numerals, red = current, teal = done) rather than the comp's colours literally, which would be white on white. ------------------------------------------------------------ */ .roal-stepper { gap: 4px; margin-bottom: 2rem; } .roal-stepper__item { flex: 1 1 130px; min-width: 118px; gap: 9px; padding: 10px 12px; border-radius: 0; background: #F1EFEA; color: #6B7280; border-top: 3px solid #D8D3CA; font-size: 13.5px; font-weight: 600; } .roal-stepper__item--current { background: #FFFFFF; color: #0F213E; border-top-color: #BC212D; font-weight: 700; box-shadow: inset 0 0 0 1px #EAE6DF; } .roal-stepper__item--done { background: #FFFFFF; color: #0F213E; border-top-color: #2BADB8; box-shadow: inset 0 0 0 1px #EAE6DF; } .roal-stepper__n { width: auto; height: auto; min-width: 20px; border-radius: 0; background: none !important; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; font-size: 19px; line-height: 1; color: inherit; } /* Completed steps show a check instead of the numeral, matching the comp. */ .roal-stepper__item--done .roal-stepper__n { font-size: 0; } .roal-stepper__item--done .roal-stepper__n::before { content: "\2713"; font-family: inherit; font-style: normal; font-size: 15px; color: #0E6F77; } .roal-stepper__item--upcoming .roal-stepper__n { color: #9AA3AF; } @media (max-width: 700px) { .roal-stepper__item { flex: 1 1 88px; min-width: 0; padding: 9px 8px; font-size: 12px; gap: 6px; } .roal-stepper__n { font-size: 16px; } } /* ------------------------------------------------------------ Ride detail step, restyled to the 2026 design language. Deliberately NOT a copy of the comp's ride-detail.html geometry. The comp is taller: 25px session times in 168px-wide cards, a 62ch description column and generous panel padding. This template's existing layout is more compact and the client prefers it, so the sizing here stays close to the original and only the styling changes: square corners, #EAE6DF hairlines, navy display italic headings, red current state, teal availability. ------------------------------------------------------------ */ .roal-detail { gap: 1.75rem; } .roal-detail__image img, .roal-detail__image--placeholder { border-radius: 0; border: 1px solid #EAE6DF; } .roal-carousel { border-radius: 0; border: 1px solid #EAE6DF; } /* Ride title and price */ .roal-detail__left h1, .roal-detail__left h2, .roal-flow__content > h1 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; color: #0F213E; letter-spacing: .005em; line-height: 1.02; } .roal-price { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 1.55rem; color: #BC212D; line-height: 1; } .roal-detail__description { color: #4B5563; font-size: .95rem; } /* Session picker: keep the compact 3-up grid, restyle the chrome only. */ .roal-session-grid { gap: 8px; } .roal-session { border: 1px solid #D8D3CA; border-radius: 0; background: #fff; padding: .55rem .7rem; font-size: .95rem; transition: border-color 140ms ease, background 140ms ease; } .roal-session:hover { border-color: #2BADB8; } .roal-session:has(input:checked) { border: 2px solid #BC212D; background: #FEF6F6; padding: calc(.55rem - 1px) calc(.7rem - 1px); } .roal-session:has(input:focus-visible) { outline: 3px solid #0E6F77; outline-offset: 2px; } .roal-session__label { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 1.15rem; color: #0F213E; line-height: 1; } /* Sold out reads as muted, not as an error. */ .roal-session.is-disabled, .roal-session:has(input:disabled) { opacity: .55; background: #F5F3F0; cursor: not-allowed; } /* Passenger form: same one-line Age / Height / Weight row, squared off. */ .roal-detail__form fieldset { border: 1px solid #EAE6DF; border-radius: 0; padding: 1rem 1.1rem 1.1rem; margin: 1rem 0; } .roal-detail__form legend { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; color: #0F213E; font-size: 1.15rem; letter-spacing: .01em; padding: 0 .4rem; } .roal-detail__form label { font-size: .9rem; font-weight: 600; color: #0F213E; } .roal-detail__form input[type="text"], .roal-detail__form input[type="number"], .roal-detail__form select { border-radius: 0; border: 1px solid #C9C4BB; min-height: 42px; font-size: 16px; /* under 16px iOS zooms the page on focus */ color: #1a1a1a; background: #fff; } .roal-detail__form input:focus, .roal-detail__form select:focus { outline: 3px solid #0E6F77; outline-offset: 1px; border-color: #C9C4BB; } .roal-detail__form .roal-passenger-grid { gap: .9rem; } .roal-fineprint { color: #4B5563; } /* Primary action matches the theme's square red button. */ .roal-detail__form .roal-btn, .roal-flow__content > .roal-btn { border-radius: 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 1.1rem; min-height: 46px; } /* ------------------------------------------------------------ Remaining checkout steps, restyled to the 2026 design language: Your order (review), Your info (purchaser), Payment, Confirm. Styling only. Layout and markup are left as they are, matching the decision on the detail step to keep the compact original geometry. ------------------------------------------------------------ */ /* ---------- shared chrome ---------- */ .roal-flow h1, .roal-flow h2, .roal-flow h3 { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; color: #0F213E; letter-spacing: .005em; line-height: 1.02; } .roal-flow .roal-muted { color: #4B5563; } .roal-flow input[type="text"], .roal-flow input[type="email"], .roal-flow input[type="tel"], .roal-flow input[type="number"], .roal-flow select { border-radius: 0; border: 1px solid #C9C4BB; min-height: 44px; font-size: 16px; /* below 16px iOS zooms on focus */ } .roal-flow input:focus, .roal-flow select:focus { outline: 3px solid #0E6F77; outline-offset: 1px; } /* Buttons: red is the forward action, outlined navy is secondary. */ .roal-btn { border-radius: 0; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; min-height: 46px; } .roal-btn--primary { background: #BC212D; border-color: #BC212D; color: #fff; } .roal-btn--primary:hover, .roal-btn--primary:focus { background: #9B1822; border-color: #9B1822; } .roal-btn--secondary { background: #fff; color: #0F213E; border: 2px solid #0F213E; } .roal-btn--secondary:hover, .roal-btn--secondary:focus { background: #0F213E; color: #fff; } .roal-btn--link { font-family: "Inter", system-ui, sans-serif; font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; color: #0F213E; text-decoration: underline; text-underline-offset: 4px; min-height: 0; } .roal-btn--link:hover { color: #BC212D; } /* ---------- Your order ---------- */ .roal-review__item { border-bottom: 1px solid #EAE6DF; border-radius: 0; padding: 1.15rem 0; } .roal-review__item img { border-radius: 0; } .roal-review__price { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 1.5rem; color: #0F213E; line-height: 1; white-space: nowrap; } /* Passenger block: the comp's quiet inset panel with uppercase micro labels. */ .roal-review__passenger { margin-top: .7rem; } .roal-review__pdetails { border: 1px solid #EFECE6; background: #FBFAF8; padding: .7rem .9rem; border-radius: 0; } .roal-review__pdetails dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #4B5563; } .roal-review__pdetails dd { font-size: .9rem; font-weight: 600; color: #1a1a1a; } .roal-review__remove { font-size: .85rem; color: #4B5563; text-underline-offset: 3px; } .roal-review__remove:hover { color: #BC212D; } .roal-review__totals { border-top: 2px solid #0F213E; border-radius: 0; padding: .9rem 0 0; margin-top: 1.1rem; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; text-transform: uppercase; font-size: 1.3rem; color: #0F213E; } .roal-review__totals strong, .roal-review__totals b { color: #BC212D; font-size: 1.55rem; } .roal-review__promo { gap: .6rem; } .roal-review__promo input { border-radius: 0; border: 1px solid #C9C4BB; min-height: 44px; } .roal-review__actions { gap: .9rem; align-items: center; } /* ---------- Your info ---------- */ .roal-purchaser-form label { font-weight: 600; color: #0F213E; font-size: .9rem; } .roal-purchaser-form input { border-radius: 0; border: 1px solid #C9C4BB; min-height: 44px; } .roal-fineprint { color: #4B5563; } /* ---------- Payment ---------- */ .roal-pay__summary { background: #fff; border: 1px solid #EAE6DF; border-radius: 0; padding: 1.25rem 1.4rem; } .roal-pay__total { border-top: 2px solid #0F213E; padding-top: .9rem; margin-top: .9rem; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; text-transform: uppercase; color: #0F213E; font-size: 1.3rem; } .roal-pay__total strong { color: #BC212D; font-size: 1.55rem; } /* ---------- Confirm ---------- */ .roal-confirm__code { background: #fff; border: 2px solid #0F213E; border-radius: 0; padding: 1.1rem 1.4rem; } .roal-confirm__code-value { font-family: ui-monospace, Menlo, monospace; font-weight: 700; letter-spacing: .08em; font-size: 1.7rem; color: #0F213E; } .roal-confirm__actions { gap: .6rem; flex-wrap: wrap; } /* ============================================================ 2026 checkout shell: navy step band + two-column "Your order". Matches design-comps/site/review.html (.flow-top, .stepper, .flow-grid, .line-item, .rail). Presentation only. No markup or logic depends on it. Tokens are written as literal hex because this stylesheet is loaded standalone and does not see the theme's custom properties. ============================================================ */ /* ---------- Navy step band (review / purchaser / pay / confirm) ---------- Absent on the rides and ride-detail steps, which sit under the theme's photo hero; there the stepper keeps its light-background styling above. */ .roal-flow-top { position: relative; background: #0F213E; color: #FFFFFF; padding: 26px 0 24px; /* Full-bleed without 100vw: a spread shadow paints the navy past the theme container on both sides, and clip-path trims it back vertically. Shadows never contribute to scroll width, so this cannot produce a stray horizontal scrollbar the way a 100vw block would. The inner content needs no re-centring and stays aligned to the page grid. */ box-shadow: 0 0 0 100vmax #0F213E; clip-path: inset(0 -100vmax); /* Cancels the checkout section's 2rem top padding so the band sits flush under the site header, as in the comp. */ margin: -2rem 0 2rem; } .roal-flow-top__inner { position: relative; } .roal-flow-back { display: inline-flex; align-items: center; gap: 7px; color: #7FE1E8; font-weight: 600; font-size: 14.5px; text-decoration: none; margin-bottom: 10px; } .roal-flow-back:hover, .roal-flow-back:focus { color: #7FE1E8; text-decoration: underline; text-underline-offset: 3px; } .roal-flow-top :focus-visible { outline: 3px solid #7FE1E8; outline-offset: 2px; } .roal-flow .roal-flow-title { margin: 0; color: #FFFFFF; font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 4vw, 46px); line-height: 1.02; letter-spacing: .005em; } /* Stepper, on-navy variant. Scoped to the band so the light-background version further up this file is untouched on the rides step. */ .roal-flow-top .roal-stepper { margin: 18px 0 0; } .roal-flow-top .roal-stepper__item { background: rgba(255, 255, 255, .05); color: #9FB2CC; border-top: 3px solid rgba(255, 255, 255, .18); box-shadow: none; } .roal-flow-top .roal-stepper__item--done { background: rgba(255, 255, 255, .05); color: #FFFFFF; border-top-color: #2BADB8; box-shadow: none; } .roal-flow-top .roal-stepper__item--current { background: rgba(255, 255, 255, .16); color: #FFFFFF; border-top-color: #BC212D; font-weight: 700; box-shadow: none; } .roal-flow-top .roal-stepper__item--done .roal-stepper__n::before { color: #7FE1E8; } .roal-flow-top .roal-stepper__item--upcoming .roal-stepper__n { color: #9FB2CC; } /* ---------- Two-column cart ---------- */ .roal-flow-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 32px; align-items: start; } .roal-flow-grid__main { min-width: 0; } /* Left column: the rides panel */ .roal-flow .roal-review { border: 1px solid #EAE6DF; background: #FFFFFF; padding: 26px 28px 30px; } .roal-flow .roal-review__item { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px; align-items: start; margin: 0; padding: 20px 0; border: 0; border-bottom: 1px solid #EAE6DF; border-radius: 0; } .roal-flow .roal-review__item:first-of-type { padding-top: 0; } .roal-flow .roal-review__item--nothumb { grid-template-columns: minmax(0, 1fr) auto; } .roal-review__thumb { width: 132px; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; border-radius: 0; } .roal-review__body { min-width: 0; } .roal-flow .roal-review__title { font-size: 22px; margin: 0 0 3px; } .roal-review__meta { font-size: 14px; color: #4B5563; margin: 0 0 2px; } .roal-flow .roal-review__price { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; font-size: 27px; line-height: 1; color: #0F213E; text-align: right; white-space: nowrap; } /* Passenger block: quiet inset panel, uppercase micro labels */ .roal-flow .roal-review__pdetails { display: flex; flex-wrap: wrap; gap: 8px 26px; border: 1px solid #EFECE6; background: #FBFAF8; padding: 11px 14px; margin: 0; } .roal-flow .roal-review__pdetails dt { font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; color: #4B5563; } .roal-flow .roal-review__pdetails dd { margin: 0 0 2px; font-size: 14.5px; font-weight: 600; color: #1a1a1a; } .roal-review__remove { margin-top: 10px; } .roal-review__remove .roal-btn--link { font-size: 13.5px; color: #4B5563; } .roal-review__remove .roal-btn--link:hover, .roal-review__remove .roal-btn--link:focus { color: #BC212D; } /* Promo code row */ .roal-flow .roal-review__promo { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; margin: 22px 0 0; padding-top: 22px; border-top: 1px solid #EAE6DF; } .roal-promo__field { flex: 1 1 220px; margin: 0; } .roal-promo__label { display: block; font-weight: 600; font-size: 14px; color: #0F213E; margin-bottom: 6px; } .roal-flow .roal-review__promo input[type="text"] { width: 100%; padding: 12px 14px; min-height: 46px; border: 1px solid #C9C4BB; border-radius: 0; background: #FFFFFF; color: #1a1a1a; font-size: 16px; /* below 16px iOS zooms the page on focus */ font-family: "Inter", system-ui, sans-serif; } /* The comp's Apply is a quiet body-font button, not the display-italic secondary. */ .roal-review__promo .roal-btn--secondary { font-family: "Inter", system-ui, sans-serif; font-style: normal; font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 15px; min-height: 46px; border-width: 1px; } .roal-promo-applied { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 8px 14px; background: #E9F6F7; color: #0E6F77; font-weight: 600; font-size: 14px; } .roal-promo-applied strong { color: #0E6F77; } /* Actions under the panel */ .roal-flow .roal-review__actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 26px; } .roal-review__actions .roal-btn--primary { margin-left: auto; font-size: 20px; padding: 14px 34px; } .roal-review__addmore { font-size: 15px; } /* ---------- Right column: sticky order rail ---------- */ .roal-rail { position: sticky; top: 86px; border: 1px solid #EAE6DF; background: #FFFFFF; } .roal-flow .roal-rail__title { margin: 0; padding: 16px 20px; border-bottom: 1px solid #EAE6DF; font-size: 22px; } .roal-rail__body { padding: 16px 20px 20px; } .roal-rail__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid #F1EEE9; } .roal-rail__item:last-of-type { border-bottom: 0; } .roal-rail__thumb { width: 64px; height: 48px; object-fit: cover; flex: none; display: block; border-radius: 0; } .roal-rail__itemtext { min-width: 0; } .roal-rail__t { font-weight: 600; font-size: 14px; line-height: 1.3; color: #1a1a1a; } .roal-rail__s { font-size: 12.5px; color: #4B5563; } .roal-rail__line { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; font-size: 14.5px; color: #4B5563; } .roal-rail__line strong { color: #1a1a1a; font-weight: 600; } .roal-rail__line--discount { color: #0E6F77; } .roal-rail__line--discount strong { color: #0E6F77; font-size: 13px; } .roal-rail__total { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-top: 12px; padding-top: 14px; border-top: 2px solid #0F213E; } .roal-rail__total span { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 21px; color: #0F213E; } .roal-rail__total b { font-family: "Barlow Condensed", "Arial Narrow", sans-serif; font-style: italic; font-weight: 800; font-size: 30px; color: #BC212D; line-height: 1; } .roal-rail__note { font-size: 12.5px; color: #4B5563; margin: 12px 0 0; line-height: 1.5; } /* ---------- Narrow screens: rail moves above the rides ---------- */ @media (max-width: 980px) { .roal-flow-grid { grid-template-columns: 1fr; } .roal-rail { position: static; top: auto; order: -1; } .roal-flow .roal-review { padding: 20px 18px 24px; } .roal-flow .roal-review__item { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; } .roal-flow .roal-review__item--nothumb { grid-template-columns: minmax(0, 1fr); } .roal-review__thumb { width: 96px; } .roal-flow .roal-review__price { grid-column: 2; text-align: left; font-size: 24px; } .roal-flow .roal-review__item--nothumb .roal-review__price { grid-column: 1; } } @media (max-width: 700px) { .roal-flow-top { padding: 20px 0 18px; } .roal-review__actions .roal-btn--primary { width: 100%; margin-left: 0; } }