/* Guester Axis ยท /demo/ page sheet. Builds on axis.css (tokens, .wrap, .page-head, .button, .text-link, .section-label, .lede, .rule, [data-reveal]). Owns the demo-* layout classes and the gd-* booker panel that demo.js drives. Rules: no font-size below var(--fs-micro); no decorative colour. */ /* ---------- head ---------- */ .demo-head{padding-top:64px;padding-bottom:56px} .demo-head h1{font-size:clamp(2.5rem,1.6rem + 3.4vw,4.35rem);letter-spacing:-.04em;line-height:1.04;max-width:14ch} /* ---------- booking ---------- */ .demo-booking{padding-bottom:96px} .demo-booking__head{display:grid;gap:10px;padding-top:32px;margin-bottom:24px;border-top:1px solid var(--line)} .demo-booking__head h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2rem);line-height:1.15;letter-spacing:-.03em} .demo-booking__sub{color:var(--muted);font-size:15px;line-height:1.55;max-width:56ch} /* The booker panel. The mount reserves the embed's height so the page does not jump when Cal.com arrives; the skeleton sits over it until .is-ready. */ .gd-cal{position:relative;isolation:isolate;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:12px} .gd-cal__mount{min-height:640px;width:100%} .gd-cal__mount>*{border-radius:12px} /* The embed uses two wrapped flex rows (its overlay container and iframe). Prevent spare min-height space being distributed above the short initial iframe; Cal still controls the final responsive height. */ .gd-cal__mount cal-inline{align-content:flex-start} .gd-cal__skeleton{position:absolute;inset:12px;display:grid;grid-template-columns:1fr;gap:16px;padding:24px 24px 64px;transition:opacity .3s var(--ease)} .gd-skel-block{background:var(--surface);border:1px solid var(--line);border-radius:12px} .gd-skel-block--side{min-height:200px} .gd-skel-block--grid{min-height:320px} .gd-cal__status{position:absolute;left:0;right:0;bottom:28px;text-align:center;color:var(--muted);font-size:var(--fs-small);font-weight:500;letter-spacing:.02em;transition:opacity .3s var(--ease)} .gd-cal.is-ready .gd-cal__skeleton,.gd-cal.is-ready .gd-cal__status{opacity:0;pointer-events:none} /* The embed failed or never arrived: the panel says so and offers the booker on Cal.com. */ .gd-cal.is-failed .gd-cal__skeleton{opacity:0;pointer-events:none} .gd-cal.is-failed .gd-cal__mount{display:none;min-height:0} .gd-cal.is-failed .gd-cal__status{position:static;padding:40px 24px 8px;color:var(--ink);letter-spacing:0;font-size:15px;font-weight:400} .gd-cal__fallback{text-align:center;padding:8px 24px 40px} .gd-cal__fallback[hidden]{display:none} /* Anyone with JS off still gets a working route to the booker: the embed can never arrive, so the skeleton and the reserved height step aside and the noscript link takes the space. html.js-motion is written inline in , so its absence is a reliable "no JS" signal. */ .gd-cal__noscript{display:block;padding:48px 24px;text-align:center} html:not(.js-enabled) .gd-cal__skeleton,html:not(.js-enabled) .gd-cal__status{display:none} html:not(.js-enabled) .gd-cal__mount{min-height:0} /* ---------- close ---------- */ .demo-close{padding-bottom:112px} .demo-close__inner{display:grid;gap:24px;padding-top:56px;max-width:60ch} .demo-close__copy{display:grid;gap:28px} .demo-close__mail{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px;color:var(--muted);font-size:15px} .demo-close__mail .text-link{color:var(--ink)} /* ---------- breakpoints ---------- */ @media(min-width:900px){ .gd-cal__skeleton{grid-template-columns:1fr 1.4fr;gap:32px} } @media(max-width:639px){ .demo-head{padding-top:40px;padding-bottom:36px} .demo-booking{padding-bottom:64px} .demo-booking__head{padding-top:24px;margin-bottom:16px;gap:6px} .demo-booking__sub{font-size:14px} .gd-cal{padding:8px} .gd-cal__skeleton{inset:8px;padding:16px 16px 52px} .gd-cal__status{bottom:20px} .demo-close{padding-bottom:72px} .demo-close__inner{padding-top:40px} .demo-close__mail{font-size:14px} } /* ---------- motion preferences ---------- */ @media(prefers-reduced-motion:reduce){ .gd-cal__skeleton,.gd-cal__status{transition:none} }