/** * G2 Accounting Booking Wizard Styles * * A friendly, conversational booking dialog that overlays the hero. * Dark frosted-glass card, electric-yellow brand accents, Bariol type. * * The dialog + backdrop are moved to at runtime, so all wizard * styles are self-contained here and do NOT rely on the .hero-banner * ancestor for the pill-button look. * * @version 2.0.0 */ :root { --wiz-yellow: #FFF73A; --wiz-black: #181818; --wiz-card: rgba(22, 22, 24, 0.86); --wiz-radius: 22px; --wiz-pill: 30px; --wiz-ease: cubic-bezier(0.34, 1.3, 0.64, 1); --wiz-duration: 320ms; } /* ======================================== Opening button (in the hero) ======================================== */ #opening { text-align: center; /* The hero rule already nudges the button down; no extra stacked margin here (it used to push the button into the scroll-arrow's hit area). */ margin-top: 0; } /* Keep the "Online Booking" button clickable above the bouncing scroll arrow. */ .home .hero-banner .scroll-indicator { z-index: 8; } /* ======================================== Backdrop + scroll lock ======================================== */ .wizard-backdrop { position: fixed; inset: 0; z-index: 9990; background: radial-gradient(120% 120% at 50% 0%, rgba(40, 40, 30, 0.55), rgba(8, 8, 10, 0.82)); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity var(--wiz-duration) ease; } .wizard-backdrop.is-open { opacity: 1; } body.wizard-open { overflow: hidden; } .wizard-backdrop[hidden], .expansion-box[hidden] { display: none !important; } /* ======================================== The dialog card ======================================== */ .expansion-box { position: fixed; top: 50%; left: 50%; z-index: 9991; width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; padding: clamp(28px, 5vw, 44px); background: var(--wiz-card); border: 1px solid rgba(255, 247, 58, 0.16); border-radius: var(--wiz-radius); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(18px) saturate(1.1); backdrop-filter: blur(18px) saturate(1.1); color: #fff; opacity: 0; transform: translate(-50%, -48%) scale(0.96); transition: opacity var(--wiz-duration) ease, transform var(--wiz-duration) var(--wiz-ease); } .expansion-box.is-open { opacity: 1; transform: translate(-50%, -50%) scale(1); } /* Glowing yellow hairline along the top edge */ .expansion-box::before { content: ''; position: absolute; top: 0; left: 12%; right: 12%; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--wiz-yellow), transparent); opacity: 0.8; } /* ======================================== Header: back | greeting | close ======================================== */ .booking-header { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin-bottom: clamp(20px, 4vw, 30px); padding-bottom: 18px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .booking-greeting { grid-column: 2; margin: 0; text-align: center; font-family: 'Bariol', sans-serif; font-weight: bold; font-size: clamp(18px, 2.6vw, 23px); color: var(--wiz-yellow); line-height: 1.2; } .wizard-control { display: inline-flex; align-items: center; gap: 6px; background: transparent; border: 0; cursor: pointer; padding: 8px 10px; border-radius: 10px; font-family: 'Bariol', sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.62); transition: color 0.25s ease, background 0.25s ease; } .wiz-icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; } .wizard-control:hover, .wizard-control:focus-visible { color: var(--wiz-yellow); background: rgba(255, 247, 58, 0.1); outline: none; } .wizard-control:focus-visible { box-shadow: 0 0 0 2px rgba(255, 247, 58, 0.5); } #back-btn { grid-column: 1; justify-self: start; } #reset-wizard-btn { grid-column: 3; justify-self: end; } /* ======================================== Questions ======================================== */ .question-container { position: relative; min-height: 96px; } .booking-question { display: none; } .booking-question.active { display: block; animation: wizFadeIn 0.45s ease both; } @keyframes wizFadeIn { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: translateX(0); } } .booking-question .question-label { margin: 0 0 clamp(20px, 4vw, 28px); text-align: center; font-family: 'Bariol', sans-serif; font-size: clamp(17px, 2.2vw, 21px); line-height: 1.35; color: rgba(255, 255, 255, 0.92); } /* ======================================== Option buttons (self-contained pill) ======================================== */ .button-group { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; align-items: stretch; } .button-group.stacked { flex-direction: column; max-width: 360px; margin: 0 auto; } .expansion-box .booking-button { flex: 0 1 auto; min-width: 190px; margin: 0; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: 'Bariol', sans-serif; font-weight: bold; font-size: clamp(16px, 1.9vw, 19px); border-radius: var(--wiz-pill); transition: transform 0.18s ease; } .expansion-box .booking-button.small { min-width: 160px; font-size: 16px; } .expansion-box .booking-button span { display: block; width: 100%; text-align: center; padding: 15px 30px; background: var(--wiz-yellow); color: var(--wiz-black); border: 2px solid transparent; border-radius: var(--wiz-pill); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .expansion-box .booking-button.small span { padding: 12px 24px; } /* Hover / keyboard focus: invert to dark with a dotted yellow ring */ .expansion-box .booking-button:hover span, .expansion-box .booking-button:focus-visible span { background: var(--wiz-black); color: var(--wiz-yellow); border-color: var(--wiz-yellow); border-style: dotted; box-shadow: 0 10px 28px rgba(255, 247, 58, 0.22); } /* Selected (your current choice): solid ring + glow */ .expansion-box .booking-button.selected span { background: var(--wiz-black); color: var(--wiz-yellow); border-color: var(--wiz-yellow); border-style: solid; box-shadow: 0 0 0 3px rgba(255, 247, 58, 0.28), 0 8px 22px rgba(0, 0, 0, 0.3); } .expansion-box .booking-button:active { transform: scale(0.97); } /* No UA outline; keyboard focus is shown by the inverted .span above, while mouse/programmatic focus stays visually neutral. */ .expansion-box .booking-button:focus { outline: none; } /* ======================================== Progress dots ======================================== */ .progress-dots { display: flex; justify-content: center; align-items: center; gap: 9px; margin-top: clamp(24px, 5vw, 34px); padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.1); } .progress-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); transition: all 0.3s ease; } .progress-dots .dot.active { background: var(--wiz-yellow); transform: scale(1.4); box-shadow: 0 0 12px rgba(255, 247, 58, 0.6); } .progress-dots .dot.completed { background: rgba(255, 247, 58, 0.5); } .progress-dots .dot.is-hidden { display: none; } /* ======================================== Embedded Acuity calendar (final step) ======================================== */ .wizard-spinner { display: inline-block; width: 44px; height: 44px; border-radius: 50%; border: 3px solid rgba(255, 247, 58, 0.22); border-top-color: var(--wiz-yellow); animation: wizSpin 0.8s linear infinite; } @keyframes wizSpin { to { transform: rotate(360deg); } } /* The card grows to host the calendar — same frame, same page as the questions. */ .expansion-box.calendar-mode { width: min(940px, calc(100vw - 24px)); height: min(900px, calc(100vh - 32px)); max-height: calc(100vh - 32px); overflow: hidden; display: flex; flex-direction: column; } .expansion-box.calendar-mode .question-container { flex: 1 1 auto; min-height: 0; } .wizard-calendar { position: relative; height: 100%; display: flex; flex-direction: column; animation: wizFadeIn 0.35s ease both; } .wizard-calendar-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; border-radius: 12px; background: #fff; opacity: 0; transition: opacity 0.4s ease; } .wizard-calendar-frame.loaded { opacity: 1; } .wizard-calendar-loading { position: absolute; top: 0; left: 0; right: 0; bottom: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; } .wizard-calendar-loading p { margin: 0; font-family: 'Bariol', sans-serif; font-size: 16px; color: rgba(255, 255, 255, 0.85); } .wizard-calendar-fallback { flex: 0 0 auto; display: block; text-align: center; margin-top: 10px; font-family: 'Bariol', sans-serif; font-size: 13px; color: rgba(255, 255, 255, 0.55); text-decoration: none; transition: color 0.2s ease; } .wizard-calendar-fallback:hover, .wizard-calendar-fallback:focus-visible { color: var(--wiz-yellow); } /* ======================================== Accessibility helpers ======================================== */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ======================================== Responsive ======================================== */ @media (max-width: 600px) { .expansion-box { padding: 26px 18px 24px; } .booking-greeting { font-size: 18px; } /* Collapse the back/close labels to icons to save room */ .wizard-control span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); } .wizard-control .wiz-icon { width: 18px; height: 18px; } .button-group { flex-direction: column; width: 100%; } .button-group .booking-button { width: 100%; min-width: 0; } .booking-summary li { flex-direction: column; gap: 2px; } /* Calendar fills the phone screen */ .expansion-box.calendar-mode { width: calc(100vw - 12px); height: calc(100vh - 16px); max-height: calc(100vh - 16px); padding: 14px 12px 12px; } } /* ======================================== High contrast ======================================== */ @media (prefers-contrast: more) { .expansion-box { background: #111; border-color: var(--wiz-yellow); } .expansion-box .booking-button span { border-color: var(--wiz-black); } } /* ======================================== Reduced motion ======================================== */ @media (prefers-reduced-motion: reduce) { .wizard-backdrop, .expansion-box, .wizard-calendar, .booking-question.active, .progress-dots .dot, .expansion-box .booking-button, .expansion-box .booking-button span { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }