/* Hero variants B and C — additive. Only the variant named by is displayed, so with this file removed the homepage falls back to the hero it has always had. */ /* ------------------------------------------------ variant switching */ [data-hero-variant] { display: none; } html[data-hero="a"] [data-hero-variant="a"], html[data-hero="b"] [data-hero-variant="b"], html[data-hero="c"] [data-hero-variant="c"] { display: block; } /* The switcher is a testing affordance, not part of the site. It appears only for a browser that has been to /?lab=1 . */ .lab-switch { display: none; } html[data-lab="on"] .lab-switch { display: flex; align-items: center; gap: .3rem; margin-left: auto; padding-left: 1rem; font-family: Lato, system-ui, sans-serif; } .lab-switch__tag { font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin-right: .1rem; } .lab-switch button { font: inherit; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; padding: .28rem .5rem; min-height: 24px; background: none; color: var(--ink-dim); border: 1px solid var(--rule); border-radius: 3px; cursor: pointer; } .lab-switch button:hover { color: var(--ink); border-color: var(--ink-dim); } .lab-switch button[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: var(--paper); } /* --------------------------------------------------- orbit core */ /* One mechanic, two settings. Cards sit on an ellipse; depth drives scale, blur, opacity and stacking, so the ring reads as a ring. JS writes the transforms; CSS does the tweening. */ .orbit { position: relative; width: 100%; aspect-ratio: var(--orbit-ar, 1 / 1); /* gives the cards cqw/cqh to position against, so no resize listener */ container-type: size; --rx: 26%; /* horizontal radius, % of container width */ --ry: 16%; /* vertical radius, % of container height */ --card: 54%; /* card width, % of container width */ } .orbit__card { position: absolute; left: 50%; top: 50%; width: var(--card); margin: 0; aspect-ratio: var(--card-ar, 4 / 3); border-radius: 14px; overflow: hidden; background: var(--paper-2); box-shadow: 0 10px 30px rgba(35,40,31,.16), 0 1px 0 rgba(255,255,255,.5) inset; transform: translate(-50%,-50%); will-change: transform, filter, opacity; transition: transform 1.5s cubic-bezier(.33,.9,.28,1), filter 1.5s cubic-bezier(.33,.9,.28,1), opacity 1.5s cubic-bezier(.33,.9,.28,1); } .orbit__card img, .orbit__card video { width: 100%; height: 100%; object-fit: cover; display: block; } /* The whole ring is one control: press to stop it. */ .orbit[data-paused="true"] .orbit__card { transition-duration: .45s; } .orbit-wrap { position: relative; } .orbit-wrap:focus-visible { outline: 2px solid var(--brick); outline-offset: 6px; border-radius: 4px; } /* ------------------------------------- B: stack in the right column */ .hero-b .opening__grid { align-items: center; } .hero-b .orbit { --orbit-ar: 1 / 1.18; --card: 60%; --card-ar: 4 / 5; } /* ------------------------------------------ C: text in the middle */ .hero-c { padding: clamp(2rem,5vw,4rem) 0 clamp(3rem,6vw,5rem); } .hero-c .orbit { --orbit-ar: 16 / 10; --rx: 41%; --ry: 32%; --card: 18%; max-width: 1180px; margin-inline: auto; } /* The centre is paper, fading outward, so cards pass behind the words instead of being clipped by an invisible box. */ .hero-c .orbit__veil { position: absolute; inset: 0; z-index: 150; pointer-events: none; background: radial-gradient(36% 34% at 50% 45%, var(--paper) 0%, rgba(236,226,214,.95) 58%, rgba(236,226,214,0) 100%); } .hero-c .orbit__centre { position: absolute; z-index: 200; left: 50%; top: 45%; transform: translate(-50%,-50%); width: min(92%, 40rem); text-align: center; } .hero-c .orbit__centre h1 { margin: 0 0 .8rem; } .hero-c .orbit__centre .opening__sub { margin-inline: auto; max-width: 42ch; } .hero-c .orbit__centre .actions { justify-content: center; display: flex; flex-wrap: wrap; gap: .75rem; } /* Below the two-column breakpoint the ring has nowhere to go: it would run under the words. Show the front card only — a still hero. */ @media (max-width: 760px) { .hero-c .orbit { aspect-ratio: auto; container-type: normal; } .hero-c .orbit__veil { display: none; } .hero-c .orbit__centre { position: static; transform: none; width: 100%; margin-bottom: 1.5rem; } .hero-c .orbit__card { display: none; } /* !important because the ring writes transform/filter/opacity inline, and inline styles would otherwise win over this fallback. */ .hero-c .orbit__card[data-front="true"] { display: block; position: static; width: 100%; transform: none !important; filter: none !important; opacity: 1 !important; } } @media (prefers-reduced-motion: reduce) { .orbit__card { transition: none; } } /* ================================================================= C (rebuilt) — multi-ring orbit field, after Orbit Gallery Pro. Concentric rings turning at different speeds and directions, cards sharp and tilted rather than blurred, the outer edge dissolving into paper. All CSS animation: the compositor does it, nothing per frame. ================================================================= */ .field-wrap { position: relative; } .field { position: relative; width: 100%; aspect-ratio: 16 / 10; container-type: size; overflow: hidden; /* Straight clip at the frame edge, as the reference does. An elliptical mask slices cards on a diagonal, which reads as torn paper, not depth. The only softening is a narrow fade down the left and right sides. */ -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%); } @keyframes fspin { to { transform: rotate(360deg); } } .ring { position: absolute; inset: 0; animation: fspin var(--dur, 140s) linear infinite; } .ring--rev { animation-direction: reverse; } .seat { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%) rotate(var(--a)) translateX(var(--r)); } /* undoes the ring's turn so the pictures never go upside down */ .spin { animation: fspin var(--dur, 140s) linear infinite reverse; } .ring--rev .spin { animation-direction: normal; } .fpic { margin: 0; width: var(--w); aspect-ratio: var(--ar, 5 / 7); border-radius: 10px; overflow: hidden; background: var(--paper-2); box-shadow: 0 8px 22px rgba(35,40,31,.18); transform: rotate(calc(-1 * var(--a) + var(--tilt, 0deg))); transition: transform .45s cubic-bezier(.2,.8,.3,1), box-shadow .45s; } .fpic img { width: 100%; height: 100%; object-fit: cover; } .fpic:hover { transform: rotate(calc(-1 * var(--a) + var(--tilt, 0deg))) scale(1.12); box-shadow: 0 16px 40px rgba(35,40,31,.26); } .field[data-paused="true"] .ring, .field[data-paused="true"] .spin { animation-play-state: paused; } .field__centre { position: absolute; z-index: 5; left: 50%; top: 50%; transform: translate(-50%,-50%); width: min(94%, 36rem); text-align: center; /* a soft breath of paper so the words never sit on a photograph */ padding: clamp(1rem,3vw,2rem); background: radial-gradient(56% 60% at 50% 50%, var(--paper) 0%, rgba(236,226,214,.93) 68%, rgba(236,226,214,0) 100%); } .field__centre .label { margin: 0 0 .6rem; } .field__centre h1 { margin: 0 auto .7rem; } .field__centre .opening__sub { margin-inline: auto; } .field__centre .actions { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem; } @media (max-width: 760px) { .field { aspect-ratio: 4 / 5; } .field__centre { width: 100%; } } @media (prefers-reduced-motion: reduce) { .ring, .spin { animation: none; } }