/* * Calendly-style Booking Page (CPT: meet_user) * ----------------------------------------------------------------------------- * Loaded only on singular meet_user pages. Site-wide app.js is dequeued for * this template; meet pages use this file (plus base.css where needed). * * Critical above-the-fold rules are duplicated inline in single-meet_user.php * to avoid render-blocking on cold caches; the rules here cover the host card * detail styling, scheduler iframe container, and responsive tweaks. * * Gordita @font-face: fonts-deferred.css via site-boot.js (after first paint), * or inline in the page where preload is set. Do not redeclare here. * * Brand tokens mirror base.css :root variables: * #00AEEF primary blue * #0b2935 deep navy (text/titles) * #F3F7F9 soft background * #5B686D muted text * #EBEDEE hairline border */ /* --------------------------------------------------------------------------- Layout shell --------------------------------------------------------------------------- */ /* Meet pages intentionally do not load base.css / site critical-css. Keep skip-link + cookie-bar details here so the page is self-contained. */ body.meet-page .skip-link { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; z-index: 100; } body.meet-page .skip-link:focus-visible { left: 1rem; top: 1rem; width: auto; height: auto; padding: 0.5rem 1rem; background: #00AEEF; color: #fff; text-decoration: none; border-radius: 4px; } body.meet-page { font-family: 'Gordita Fallback', 'Gordita', Arial, sans-serif; background: #F3F7F9; color: #0b2935; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; margin: 0; } .meet-topbar { display: flex; align-items: center; justify-content: center; height: 64px; padding: 0 24px; background: transparent; } .meet-topbar__logo { display: inline-flex; align-items: center; text-decoration: none; transition: opacity 0.18s ease; } .meet-topbar__logo:hover { opacity: 0.75; } .meet-topbar__logo img { height: 28px; width: auto; display: block; } .meet-topbar__logo-text { font-weight: 700; font-size: 18px; color: #0b2935; letter-spacing: -0.01em; } .meet-shell { flex: 1 0 auto; display: flex; align-items: flex-start; justify-content: center; padding: 16px 16px 48px; } /* --------------------------------------------------------------------------- Booking card --------------------------------------------------------------------------- */ /* Card is intentionally wide (1320 px) and the host column is intentionally slim (300 px) so the right-hand iframe gets the maximum possible width. Google's scheduler fits roughly one additional day per ~250 px of width: ~600 px → 2 days ~800 px → 3 days ~1000 px → 4 days With a 300 px host column the iframe gets about 1020 px on desktop, so bookers see 4 days at once = far less clicking through to find a slot. */ .meet-card { background: #ffffff; border-radius: 20px; box-shadow: 0 12px 40px rgba(11, 41, 53, 0.08), 0 2px 6px rgba(11, 41, 53, 0.04); width: 100%; max-width: 1320px; display: grid; grid-template-columns: 300px 1fr; overflow: hidden; } /* --------------------------------------------------------------------------- Left column, host info --------------------------------------------------------------------------- */ .meet-host { padding: 32px 26px; border-right: 1px solid #EBEDEE; display: flex; flex-direction: column; gap: 12px; } .meet-host__avatar { width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: linear-gradient(135deg, #59D2FF 0%, #00AEEF 100%); box-shadow: 0 6px 18px rgba(0, 174, 239, 0.25); border: 4px solid #ffffff; margin-bottom: 8px; flex-shrink: 0; } .meet-host__avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .meet-host__brand { font-size: 13px; font-weight: 500; color: #5B686D; margin: 0; letter-spacing: 0.02em; } /* Higher specificity than site critical-css h1/ul rules if those ever leak in. */ body.meet-page .meet-host__name { font-size: 26px; font-weight: 700; line-height: 1.2; color: #0b2935; margin: 0; letter-spacing: -0.015em; min-height: 0; } .meet-host__subtitle { font-size: 15px; color: #5B686D; margin: 0 0 8px; line-height: 1.45; } body.meet-page .meet-host__meta { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 12px; } body.meet-page .meet-host__meta li { display: flex; flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: #0b2935; padding-left: 0; } body.meet-page .meet-host__meta li::before { content: none; } .meet-host__meta svg { color: #00AEEF; flex-shrink: 0; } /* --------------------------------------------------------------------------- Right column, Google Calendar iframe --------------------------------------------------------------------------- Google Calendar appointment scheduler does NOT expose any documented URL parameter beyond `gv=true` (we already set it in the template) to customise layout. Confirmed in Google Calendar Community thread: https://support.google.com/calendar/thread/200857183 So we just give the iframe enough height to fit Google's content naturally on every viewport, no internal scrollbar, no clipping. */ .meet-scheduler { position: relative; background: #ffffff; display: flex; } .meet-scheduler__frame { width: 100%; } .meet-scheduler iframe { width: 100%; /* Slightly shorter than the previous 900 px because more days fit side-by-side in the wider iframe, so Google needs less vertical space to show its time-slot list. */ height: 880px; border: 0; display: block; background: #ffffff; } /* --------------------------------------------------------------------------- Responsive, single column under 860 px --------------------------------------------------------------------------- When the card stacks (host info above scheduler), Google's scheduler also collapses to a single column internally → it gets taller. We raise the iframe height accordingly so the booking widget never needs an internal scrollbar. */ @media (max-width: 860px) { .meet-card { grid-template-columns: 1fr; border-radius: 16px; } .meet-host { border-right: 0; border-bottom: 1px solid #EBEDEE; padding: 28px 24px; } .meet-host__name { font-size: 22px; } .meet-host__avatar { width: 80px; height: 80px; } .meet-scheduler iframe { height: 1100px; } } @media (max-width: 768px) { .meet-shell { padding: 12px 12px 40px; } .meet-scheduler iframe { height: 1150px; } } @media (max-width: 480px) { .meet-shell { padding: 8px 8px 32px; } .meet-topbar { height: 56px; } .meet-host { padding: 24px 20px; gap: 10px; } .meet-host__avatar { width: 72px; height: 72px; } .meet-host__name { font-size: 20px; } .meet-scheduler iframe { height: 1200px; } } @media (max-width: 360px) { .meet-host { padding: 20px 16px; } .meet-host__name { font-size: 19px; } .meet-scheduler iframe { height: 1280px; } } /* --------------------------------------------------------------------------- Cookie consent bar (meet pages do not load base.css) --------------------------------------------------------------------------- */ body.meet-page .cookie-consent-bar__wrap { width: 100%; max-width: 1230px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; } body.meet-page .cookie-consent-bar__text { margin: 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, 0.92); } body.meet-page .cookie-consent-bar__actions { display: flex; flex-shrink: 0; align-items: center; gap: 12px; } body.meet-page .cookie-consent-bar__btn { font-family: 'Gordita Fallback', 'Gordita', sans-serif; font-size: 0.875rem; font-weight: 600; min-height: 44px; min-width: 160px; padding: 0 1.25rem; border-radius: 12px; cursor: pointer; } body.meet-page .cookie-consent-bar__btn--accept { border: none; background: linear-gradient(135deg, #00AEEF 0%, #0099D6 100%); color: #ffffff; } body.meet-page .cookie-consent-bar__btn--reject { background: transparent; color: #ffffff; border: 2px solid rgba(255, 255, 255, 0.55); } @media (max-width: 900px) { body.meet-page .cookie-consent-bar__wrap { flex-direction: column; align-items: stretch; gap: 16px; } body.meet-page .cookie-consent-bar__actions { width: 100%; flex-direction: column; } body.meet-page .cookie-consent-bar__btn { width: 100%; } } /* Honor visitor's reduced-motion preference */ @media (prefers-reduced-motion: reduce) { .meet-topbar__logo { transition: none; } }