/* ============================================================ stage.css — "the floor is the stage" Additive. Deleting the to this file returns the site to exactly what it was. Every rule is gated on a token in so one effect can be dropped alone. ============================================================ */ /* ---------- primary action in the nav ---------- */ .nav__cta { border: 1px solid var(--forest) !important; padding: .5rem .95rem; color: var(--forest); transition: background .18s ease, color .18s ease; } .nav__cta:hover { background: var(--forest); color: var(--paper); border-bottom-color: var(--forest) !important; } .nav__cta[aria-current="page"] { background: var(--forest); color: var(--paper); } @media (max-width: 860px) { .nav__cta { display: inline-block !important; margin-top: .5rem; text-align: center; } } /* ============================================================ the floor A single horizontal plane the whole site is organised on. Rules run full-bleed instead of stopping at the text column, so consecutive sections read as one continuous ground rather than a stack of cards. ============================================================ */ [data-fx~="floor"] [data-floor] { position: relative; } [data-fx~="floor"] [data-floor]::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 100vw; height: 1px; background: var(--rule); pointer-events: none; } /* things stand ON the floor rather than floating in a box */ [data-fx~="floor"] .band-play__fig { align-items: flex-end; } [data-fx~="floor"] .band-play__fig img { object-position: bottom center; } [data-fx~="floor"] .band-play { border-top: 0; } /* the hero figure meets the same line */ [data-fx~="floor"] .morph img { object-position: bottom center; } /* ============================================================ scroll progress stage.js writes --p (0 → 1) onto [data-scroll] as it crosses the viewport. Everything in the "lite" tier is driven by it, so the cheap versions need no JS of their own. ============================================================ */ [data-scroll] { --p: 0; } /* Nothing moves for anyone who asked for that, at any tier. */ /* ============================================================ ACTS — homepage structure ============================================================ */ .act { position: relative; } /* ---------- Act 3 · the sequence ---------- Four photographs stacked; each fades in over the last as --p advances, so scrolling walks the viewer from an empty floor to children inside the material. No JS beyond --p. */ .sequence { position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%); } .sequence__stage { position: relative; height: clamp(340px, 68vh, 780px); overflow: hidden; background: var(--paper-3); } .sequence__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .sequence__stage img:nth-child(2) { opacity: clamp(0, calc((var(--p) - .22) * 5), 1); } .sequence__stage img:nth-child(3) { opacity: clamp(0, calc((var(--p) - .46) * 5), 1); } .sequence__stage img:nth-child(4) { opacity: clamp(0, calc((var(--p) - .70) * 5), 1); } .sequence__cap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin: .85rem auto 0; font-size: var(--text-small); color: var(--ink-dim); } @media (prefers-reduced-motion: reduce) { .sequence__stage img:nth-child(2), .sequence__stage img:nth-child(3) { opacity: 0; } .sequence__stage img:nth-child(4) { opacity: 1; } } /* ---------- Act 5 · the split path ---------- */ /* The 1px gap is the divider: the grid's own background shows through it. The outer edges carry no padding, so the first column starts on the same line as everything else down the page, and no vertical padding either — the section's padding sets the rhythm on its own. */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); } .split > div { background: var(--bg); padding: 0 clamp(1.5rem, 3vw, 2.5rem); } .split > div:first-child { padding-left: 0; } .split > div:last-child { padding-right: 0; } .split h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); margin-top: 0; } @media (max-width: 760px) { .split { grid-template-columns: 1fr; } .split > div { padding-inline: 0; } .split > div + div { padding-top: clamp(1.75rem, 5vw, 2.5rem); } .split > div:first-child { padding-bottom: clamp(1.75rem, 5vw, 2.5rem); } } /* ============================================================ PHASE 5 — mobile and media art direction ============================================================ */ /* ---------- booking: cards on a phone, table on a desk ---------- A 640px table inside a 390px viewport hides two of the three plays behind a scroll almost nobody discovers. */ .compare-cards { display: none; } @media (max-width: 860px) { .table-scroll { display: none; } .compare-cards { display: grid; gap: 1.25rem; margin-top: 2rem; } .cmp { border: 1px solid var(--rule); background: var(--paper); padding: 1.25rem; } .cmp > h3 { font-size: 1.5rem; margin: 0 0 .1em; } .cmp > h3 a { text-decoration: none; } .cmp__mat { display: block; font-size: .72rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--brick-text); margin-bottom: .9rem; } .cmp dl { display: grid; grid-template-columns: 8.5rem 1fr; gap: .1rem 1rem; margin: 0; } .cmp dt { font-size: .68rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); padding: .55rem 0; border-top: 1px solid var(--rule); } .cmp dd { margin: 0; padding: .55rem 0; font-size: .95rem; border-top: 1px solid var(--rule); } } /* ---------- full-screen menu on a phone ---------- */ @media (max-width: 860px) { .nav[data-open="true"] .nav__list { position: fixed; inset: 0; width: 100%; min-width: 0; border: 0; padding: clamp(5rem, 18vh, 8rem) var(--gutter) 3rem; background: var(--paper); flex-direction: column; align-items: flex-start; justify-content: center; gap: .5rem; z-index: 60; overflow-y: auto; } .nav[data-open="true"] .nav__list li { text-align: left; } .nav[data-open="true"] .nav__list a { font-family: var(--display); font-size: clamp(2rem, 9vw, 3rem); letter-spacing: -.01em; text-transform: none; font-weight: 500; color: var(--forest); padding: .3rem 0; } .nav[data-open="true"] .nav__cta { font-family: var(--sans) !important; font-size: .8rem !important; text-transform: uppercase; letter-spacing: .16em; margin-top: 1.5rem; } /* the big-menu link colour outranked the CTA's own, so on the Booking page it was rendering forest-on-forest — invisible */ .nav[data-open="true"] .nav__list .nav__cta { color: var(--forest); background: transparent; } .nav[data-open="true"] .nav__list .nav__cta[aria-current="page"] { background: var(--forest); color: var(--paper); } .nav[data-open="true"] .nav__toggle { position: relative; z-index: 61; } } /* ---------- testimonials: one voice, then a chorus ---------- */ .says-lead { font-family: var(--display); font-size: clamp(1.9rem, 4vw, 3.2rem); line-height: 1.22; color: var(--forest); max-width: 20ch; margin: 0 0 1rem; } .says-lead cite { display: block; margin-top: 1.2rem; font-family: var(--sans); font-style: normal; font-size: .74rem; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); } .chorus { columns: 2 300px; column-gap: clamp(2rem, 5vw, 4rem); margin-top: clamp(2.5rem, 5vw, 4rem); padding-top: 2rem; border-top: 1px solid var(--rule); } .chorus p { break-inside: avoid; margin: 0 0 1.4em; max-width: none; font-size: var(--text-small); color: var(--ink-dim); } .chorus b { display: block; color: var(--ink); font-weight: 400; font-size: var(--text); margin-bottom: .3rem; } /* ---------- About: who assembled for which play ---------- */ .company-map { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: var(--text-table); } .company-map th, .company-map td { text-align: left; padding: .7rem .6rem; border-bottom: 1px solid var(--rule); } .company-map thead th { font-family: var(--sans); font-size: .68rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 2px solid var(--forest); } .company-map tbody th { font-weight: 700; color: var(--ink); width: 34%; } .company-map td { text-align: center; color: var(--brick-text); font-weight: 900; } .company-map td[data-no] { color: var(--rule); } @media (max-width: 620px) { .company-map { font-size: .8rem; } .company-map th, .company-map td { padding: .55rem .3rem; } } /* ============================================================ Plays dropdown ============================================================ */ .nav__has-sub { position: relative; } .nav__sub-toggle { font: inherit; font-size: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; background: none; border: 0; border-bottom: 1px solid transparent; padding: .3rem 0; cursor: pointer; } .nav__sub-toggle:hover { border-bottom-color: var(--brick); } .nav__sub-toggle[data-in-section] { border-bottom-color: var(--ink); } .nav__sub-toggle::after { content: ""; display: inline-block; width: .38em; height: .38em; margin-left: .5em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-.15em) rotate(45deg); transition: transform .18s ease; } .nav__sub-toggle[aria-expanded="true"]::after { transform: translateY(.05em) rotate(-135deg); } .nav__sub { display: none; position: absolute; top: calc(100% + .7rem); left: -1rem; min-width: 14rem; margin: 0; padding: .4rem 0; list-style: none; background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 12px 28px -18px rgba(36, 58, 28, .5); z-index: 50; } /* The panel floats .7rem below the button, and that gap belongs to neither of them: the pointer crossing it is over nothing, :hover drops, and the menu closes before you arrive. This bridges it — a pseudo-element of the panel itself, so it only exists while the panel is open. */ .nav__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: .8rem; } .nav__has-sub[data-open="true"] .nav__sub { display: block; } @media (hover: hover) { .nav__has-sub:hover .nav__sub, .nav__has-sub:focus-within .nav__sub { display: block; } } .nav__sub li { width: 100%; } .nav__sub a { display: block; padding: .55rem 1rem; font-size: .78rem; letter-spacing: .1em; border-bottom: 0 !important; white-space: nowrap; } .nav__sub a:hover { background: var(--paper-2); } .nav__sub a[aria-current="page"] { color: var(--brick-text); font-weight: 700; } .nav__sub li:last-child a { border-top: 1px solid var(--rule) !important; margin-top: .4rem; padding-top: .7rem; color: var(--ink-dim); } /* ---------- inside the full-screen phone menu ---------- */ @media (max-width: 860px) { .nav[data-open="true"] .nav__sub-toggle { font-family: var(--display); font-size: clamp(2rem, 9vw, 3rem); text-transform: none; letter-spacing: -.01em; font-weight: 500; color: var(--forest); padding: .3rem 0; } /* no nested toggle to hunt for on a phone — the plays are simply listed */ .nav[data-open="true"] .nav__sub { display: block; position: static; border: 0; box-shadow: none; background: none; min-width: 0; padding: 0 0 .6rem; } .nav[data-open="true"] .nav__sub a { font-family: var(--sans); font-size: .95rem; letter-spacing: .04em; text-transform: none; padding: .35rem 0 .35rem 1rem; border-left: 1px solid var(--rule) !important; color: var(--ink); } .nav[data-open="true"] .nav__sub li:last-child a { border-top: 0 !important; margin-top: .2rem; } .nav[data-open="true"] .nav__sub-toggle::after { display: none; } } /* ============================================================ Homepage play bands — the whole card is the link ============================================================ */ /* The heading's anchor is stretched over the entire article, so a click anywhere opens the production. It stays one link in the accessibility tree — no nested interactive elements, nothing new to tab through. */ .band-play { position: relative; } .band-play h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* the explicit button has to sit above the overlay to remain its own target */ .band-play .actions { position: relative; z-index: 2; } .band-play .actions .btn { position: relative; } /* The card responds as one object: the title warms to brick and the button fills. No underline — the whole band is the link, so an underline on one word inside it misdescribes what is clickable. */ .band-play h3 a { color: var(--forest); transition: color .55s cubic-bezier(.2,.7,.3,1); } .band-play:hover h3 a, .band-play:focus-within h3 a, .band-play.is-lit h3 a { color: var(--brick); } .band-play:hover .btn { background: var(--forest); border-color: var(--forest); color: var(--paper); } /* Grey until you attend to it, then the colour comes back. The cut-outs stand on the floor line, so the warmth arrives from the ground up: the drop-shadow deepens and the figure lifts very slightly as it saturates. On touch, where there is no hover, the same thing happens when the whole figure is on screen — see the observer in main.js. */ .band-play__fig img { filter: grayscale(1) contrast(.96); transform: translateY(0) scale(1); transition: filter .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1); } .band-play:hover .band-play__fig img, .band-play:focus-within .band-play__fig img, .band-play.is-lit .band-play__fig img { filter: grayscale(0) contrast(1) drop-shadow(0 18px 22px rgba(36, 58, 28, .22)); transform: translateY(-4px) scale(1.015); } @media (prefers-reduced-motion: reduce) { .band-play__fig img { transition: filter .3s linear; } .band-play:hover .band-play__fig img, .band-play.is-lit .band-play__fig img { transform: none; } } /* The premiere line in a play page's opening — quieter than the facts above it, since it is provenance rather than a booking detail. */ .premiere { margin: 1.1rem 0 0; font-family: Lato, system-ui, sans-serif; font-size: var(--text-small); color: var(--ink-dim); max-width: 46ch; } /* The last play band carries its own bottom padding (they all do, to hold the floor line clear of the text). Stacked on top of the section's own padding that made the join to the next section half again wider than every other join on the page. */ #plays { padding-bottom: clamp(2rem, 5vw, 5rem); } /* ============================================================ The "why" figure as a circle ============================================================ */ /* A square video cropped to a disc, ringed in brick. The ring is drawn with box-shadow rather than a border so it sits outside the clip and the mask stays a true circle at any size. */ .why-fig--round { width: 100%; max-width: 460px; margin-inline: auto; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden; position: relative; box-shadow: 0 0 0 3px var(--brick); /* Safari still needs the transform hint to clip a video to a radius */ transform: translateZ(0); isolation: isolate; } .why-fig--round video { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } @media (max-width: 820px) { .why-fig--round { max-width: 340px; } } /* ============================================================ Play pages — the technical block ============================================================ */ /* The spec table should begin level with the prose beside it, not with the section heading above it. Two rows do that at every width; a margin-top would only be right at the one where the heading happens to wrap that way. */ .tech__head { grid-column: 1; grid-row: 1; margin-bottom: clamp(1rem, 2vw, 1.5rem); } .tech__body { grid-column: 1; grid-row: 2; } .tech__spec { grid-column: 2; grid-row: 2; } .tech__head h2 { margin-bottom: 0; } .tech__body > p:first-child { margin-top: 0; } .tech__spec .spec { margin-top: 0; } @media (max-width: 820px) { .tech__head, .tech__body, .tech__spec { grid-column: 1; grid-row: auto; } } /* Credits, on the same principle: the display line sits in its own row so the table starts level with the prose under it — or, where there is no prose, where that prose would begin. */ .credits__lead { grid-column: 1; grid-row: 1; margin-bottom: clamp(1rem, 2vw, 1.5rem); } .credits__body { grid-column: 1; grid-row: 2; } .credits__spec { grid-column: 2; grid-row: 2; } .credits__lead .pull { margin-bottom: 0; } .credits__body > p:first-child { margin-top: 0; } .credits__spec .spec { margin-top: 0; } @media (max-width: 820px) { .credits__lead, .credits__body, .credits__spec { grid-column: 1; grid-row: auto; } } /* ============================================================ Why — the numbered propositions ============================================================ */ /* The right-hand column drops a little, so the four arguments read as a sequence rather than as a table of four equal boxes. Only while there are two columns to stagger. */ @media (min-width: 761px) { .props .prop:nth-child(even) { margin-top: clamp(1.75rem, 4vw, 3.5rem); } } /* The play's opening argument: title, then its one-line sub beneath it, then the prose starting below both. Three rows rather than an offset, so it holds however the title wraps. */ .play-intro__head { grid-column: 1; grid-row: 1; } .play-intro__lead { grid-column: 1; grid-row: 2; margin-top: clamp(1.25rem, 3vw, 2rem); } .play-intro__body { grid-column: 2; grid-row: 3; } .play-intro__lead .pull { margin-bottom: 0; } .play-intro__body > p:first-child { margin-top: 0; } @media (max-width: 820px) { .play-intro__head, .play-intro__lead, .play-intro__body { grid-column: 1; grid-row: auto; } }