/* Guester Cinema, the /demo/ page. * * The page is the booker. One ivory room holding the Cal.com embed, then * the editorial slab that hands over to the footer. * * Everything reads the room tokens (--background, --foreground, * --brand-gold, --panel-*) rather than a literal colour. main.css is a * compiled Tailwind build, so this file owns its own gd-* classes instead * of inventing utilities that would silently do nothing. */ :root { --gd-max: 1200px; --gd-narrow: 62ch; --gd-ease-entrance: cubic-bezier(0.22, 1, 0.36, 1); --gd-section-y: clamp(4rem, 2.5rem + 6vw, 7rem); } /* ---------------------------------------------------------------- shell */ .gd-shell { margin-inline: auto; max-width: var(--gd-max); padding-inline: 1.25rem; } @media (min-width: 640px) { .gd-shell { padding-inline: 2rem; } } .gd-section { padding-block: var(--gd-section-y); } /* First section on the page: clear the floating nav pill and no more, so the booker itself is what fills the opening viewport. */ .gd-first { padding-top: clamp(5.5rem, 4.5rem + 3vw, 7rem); } .gd-h2 { font-family: var(--font-display-face); font-optical-sizing: auto; font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.1; /* Turkish sets c-cedilla and s-cedilla with a mark below the baseline; tight display leading clips them without this reserve. */ padding-bottom: 0.08em; text-wrap: balance; } /* The closing statement carries more weight than a section heading. */ .gd-h2--display { font-size: clamp(2.375rem, 1.7rem + 2.6vw, 4rem); font-weight: 500; letter-spacing: -0.015em; line-height: 1.06; } .gd-lede { color: var(--muted-foreground); font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); line-height: 1.6; max-width: var(--gd-narrow); } /* -------------------------------------------------------------- booking */ .gd-booking__head { margin-bottom: clamp(1.25rem, 1rem + 1vw, 1.75rem); } /* The heading is a label for the booker, not a hero: hold it down so the calendar clears the fold. */ .gd-booking__head .gd-h2 { font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); } .gd-booking__head .gd-lede { font-size: 1rem; margin-top: 0.625rem; max-width: 56ch; } .gd-cal { border-radius: var(--radius-panel, 1.5rem); isolation: isolate; overflow: hidden; padding: clamp(0.5rem, 0.25rem + 1vw, 1rem); position: relative; } .gd-cal__mount { min-height: 640px; width: 100%; } .gd-cal__mount > * { border-radius: 1.125rem; } /* Skeleton shaped like the booker that replaces it, not a spinner. */ .gd-cal__skeleton { display: grid; gap: 1rem; grid-template-columns: 1fr; inset: clamp(0.5rem, 0.25rem + 1vw, 1rem); padding: 1.5rem; position: absolute; transition: opacity 0.3s var(--gd-ease-entrance); } @media (min-width: 900px) { .gd-cal__skeleton { grid-template-columns: 1fr 1.4fr; gap: 2rem; } } .gd-cal.is-ready .gd-cal__skeleton { opacity: 0; pointer-events: none; } .gd-skel-block { background: var(--inset-bg); border: 1px solid var(--inset-border); border-radius: 1.125rem; } .gd-skel-block--side { min-height: 200px; } .gd-skel-block--grid { min-height: 320px; } .gd-cal__status { bottom: 1.75rem; color: var(--muted-foreground); font-family: var(--font-geist-mono), ui-monospace, SFMono-Regular, monospace; font-size: 0.6875rem; left: 0; letter-spacing: 0.14em; position: absolute; right: 0; text-align: center; text-transform: uppercase; } .gd-cal.is-ready .gd-cal__status { opacity: 0; } /* 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: 3rem 1.5rem; text-align: center; } html:not(.js-motion) .gd-cal__skeleton, html:not(.js-motion) .gd-cal__status { display: none; } html:not(.js-motion) .gd-cal__mount { min-height: 0; } /* ---------------------------------------------------------------- close */ .gd-close { overflow: hidden; position: relative; text-align: center; } .gd-close__inner { align-items: center; display: flex; flex-direction: column; justify-content: center; min-height: 46vh; position: relative; z-index: 1; } .gd-close .gd-lede { margin-inline: auto; margin-top: 1.5rem; } .gd-close__mail { align-items: baseline; color: var(--muted-foreground); display: flex; flex-wrap: wrap; font-size: 0.9375rem; gap: 0.5rem; justify-content: center; margin-top: 2.5rem; } .gd-close__mail a { border-bottom: 1px solid color-mix(in oklab, var(--foreground) 35%, transparent); color: var(--foreground); padding-bottom: 1px; text-decoration: none; transition: border-color 0.2s var(--ease-out), color 0.2s var(--ease-out); } .gd-close__mail a:hover { border-bottom-color: var(--brand-gold); color: var(--brand-gold); } .gd-close__watermark { left: 50%; pointer-events: none; position: absolute; top: 50%; transform: translate3d(-50%, -50%, 0); } /* --------------------------------------------------------------- motion */ /* The one scroll-linked move left, on the compositor via a scroll-driven animation, so the page never attaches a scroll listener. The static style above is already the end pose, so a browser without animation-timeline gets the finished page rather than a broken one. */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .gd-close__watermark { animation: gd-mark-drift linear both; animation-timeline: view(); } } } @keyframes gd-mark-drift { from { transform: translate3d(-50%, calc(-50% + 40px), 0); } to { transform: translate3d(-50%, calc(-50% - 40px), 0); } } @media (prefers-reduced-motion: no-preference) { html.js-motion .gd-reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.42s var(--gd-ease-entrance), transform 0.42s var(--gd-ease-entrance); transition-delay: calc(var(--i, 0) * 70ms); } html.js-motion .gd-reveal.is-in, html.js-motion .is-in .gd-reveal { opacity: 1; transform: none; } } /* Everything settles at its end state; nothing stays hidden or offset. */ @media (prefers-reduced-motion: reduce) { .gd-close__watermark { opacity: 1 !important; transform: translate3d(-50%, -50%, 0) !important; } .gd-reveal { opacity: 1 !important; transform: none !important; } } @media (prefers-reduced-transparency: reduce) { .gd-cal { backdrop-filter: none; } }