/* ============================================================ SUGARGLASS ------------------------------------------------------------ Brand: ../Sugarglass Branding/Sugarglass_Brand Identity Guidelines.pdf The system is COLOUR PAIRS — one colour as ground, one as type. Rule from the guide: black type on colour. Never white type. Carve-out: Wine and Sea are too dark for black body text (~3-4:1), so they are display/accent grounds only. ============================================================ */ /* Self-hosted, from ../Sugarglass Branding/Fonts via tools/fonts.py. Two variable files, 63 KB together, against 91 KB and two extra handshakes from Google Fonts. `font-display:swap` shows the fallback immediately and swaps when the face lands — the files are small enough that the swap is rarely seen, and invisible text would be worse. */ @font-face{ font-family:"Inter"; src:url("fonts/inter.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } @font-face{ font-family:"Inter Tight"; src:url("fonts/inter-tight.woff2") format("woff2"); font-weight:400 800; font-style:normal; font-display:swap; } :root{ --lemon:#FFFF00; --piggelin:#BAEDA6; --lilac:#C996FF; --sky:#71C7FE; --sea:#3B6CCF; --mauve:#D7A0B4; --wine:#95414C; --choral:#FF604F; --black:#000000; --white:#FFFFFF; --ground:var(--lemon); --type:var(--black); --display:"Inter Tight", "Inter", system-ui, sans-serif; --body:"Inter", system-ui, sans-serif; --gutter:clamp(16px, 3vw, 40px); --rule:1.5px solid currentColor; } /* Each page sets its own pairing on etc. html inherits body's computed ground via the :has() below so the colour reaches the window edges either side of the centred page. */ html:has(.ground-lemon){background:var(--lemon)} html:has(.ground-piggelin){background:var(--piggelin)} html:has(.ground-lilac){background:var(--lilac)} html:has(.ground-sky){background:var(--sky)} html:has(.ground-mauve){background:var(--mauve)} html:has(.ground-choral){background:var(--choral)} html:has(.ground-white){background:var(--white)} .ground-lemon{--ground:var(--lemon)} .ground-piggelin{--ground:var(--piggelin)} .ground-lilac{--ground:var(--lilac)} .ground-sky{--ground:var(--sky)} .ground-mauve{--ground:var(--mauve)} .ground-choral{--ground:var(--choral)} .ground-white{--ground:var(--white)} *{box-sizing:border-box} /* The page has a measure. Below 1500px nothing changes; above it the whole layout centres rather than the text lines stretching across a large monitor and the hero sitting inset while the headings run to the edge. The ground colour is on html so the colour still bleeds to the window edge. */ html{background:var(--ground); overflow-x:hidden} body{ margin:0 auto; max-width:1500px; background:var(--ground); color:var(--type); font-family:var(--body); font-size:16px; line-height:1.45; -webkit-font-smoothing:antialiased; } a{color:inherit; text-underline-offset:3px} p, li, blockquote, .display{overflow-wrap:break-word} /* ============================================================ MASTHEAD — wordmark left, nav right, per the brand guide ============================================================ */ /* The masthead is deliberately shorter than the gutter would make it. The wordmark is the identity and stays bold, but at full size the band was ~200px before a page said anything, on every page. */ .masthead{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; border-bottom:var(--rule); padding:calc(var(--gutter) * .62) var(--gutter) calc(var(--gutter) * .55); } /* the floor keeps the tablet wordmark from collapsing smaller than the phone's */ .wordmark{display:block; width:clamp(180px, 17vw, 245px)} .wordmark svg{display:block; width:100%; height:auto; color:var(--type)} @media (max-width:620px){ .masthead{flex-direction:column; align-items:stretch} .wordmark{width:min(196px, 54vw)} } nav{ display:flex; gap:clamp(14px, 2vw, 30px); font-family:var(--display); font-size:clamp(.85rem, 1.3vw, 1rem); padding-bottom:2px; } nav a{text-decoration:none} /* Productions dropdown — a

, so it works with keyboard and touch without any JavaScript on a site that otherwise has none. */ .menu{position:relative} .menu summary{list-style:none; cursor:pointer; user-select:none} .menu summary::-webkit-details-marker{display:none} .menu summary::after{content:"›"; display:inline-block; margin-inline-start:5px; transform:rotate(90deg)} .menu[open] summary{text-decoration:underline} .menu-list{ position:absolute; inset-inline-end:0; top:calc(100% + 6px); z-index:30; display:flex; flex-direction:column; min-width:220px; background:var(--ground); border:var(--rule); } .menu-list a{padding:9px 12px; white-space:nowrap} .menu-list a + a{border-top:var(--rule)} .menu-list a:hover, .menu-list a:focus-visible{background:var(--type); color:var(--ground); outline:none} .menu-list a[aria-current="page"]{font-weight:700; text-decoration:underline} @media (max-width:620px){ .menu-list{inset-inline-end:auto; inset-inline-start:0} } nav a:hover, nav a[aria-current="page"]{text-decoration:underline} /* ============================================================ THE EDITORIAL GRID — list left, copy right ============================================================ */ .spread{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.9fr); gap:var(--gutter); padding:var(--gutter); align-items:start; } /* A production page WITH key art has three parts, and its SOURCE ORDER is written for the phone: synopsis, picture, detail. The desktop two-column layout is rebuilt from that — art down the left across both rows, synopsis top right, credits beneath it. Scoped to min-width, not undone at max-width. Undoing it was tried and failed: `.spread.with-art > *` is (0,2,0) and loses to `.spread.with-art > .art` at (0,3,0), so the phone kept a phantom second column — `grid-template-columns` computed to "0px 342px" and the key art sat beside the synopsis in a column of zero width. Place it only where it applies and there is nothing to override. */ @media (min-width:761px){ .spread.with-art > .art{grid-column:1; grid-row:1 / span 2} .spread.with-art > .copy{grid-column:2; grid-row:1} .spread.with-art > .credits{grid-column:2; grid-row:2; align-self:start} } @media (max-width:760px){ .spread{grid-template-columns:1fr} /* Stacked, the left-hand column would otherwise land first — so a phone meets the credits list before it knows what the show is. Pages that lead with prose opt in; the productions index deliberately does not. */ .spread.copy-first > .copy{order:-1} } .label{ font-family:var(--display); font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; padding-bottom:6px; border-bottom:var(--rule); margin:0 0 4px; } /* the production index — ruled rows, as in the guide */ .index{list-style:none; margin:0; padding:0} .index li{border-bottom:var(--rule)} /* Status sits under the title, always. Inline, a long one like "TOURING 2027" wraps while a bare year doesn't, so the rows disagree with each other. */ .index a{ display:block; padding:12px 10px 12px 0; text-decoration:none; font-family:var(--display); font-weight:800; letter-spacing:-.025em; font-size:clamp(1.5rem, 3.6vw, 2.9rem); line-height:1.02; transition:background .12s, color .12s, padding .12s; } /* hover inverts the pair — the brand is two colours, so use both */ .index a:hover, .index a:focus-visible{ background:var(--type); color:var(--ground); padding-inline:10px; outline:none; } .index .status{ display:block; margin-top:3px; font-family:var(--body); font-size:.68rem; font-weight:400; text-transform:uppercase; letter-spacing:.08em; opacity:.7; } .copy p{max-width:62ch; margin:0 0 .9em; font-size:.95rem} /* after .copy p, and matching its specificity, or it loses and every paragraph renders at body size */ .copy .lede, p.lede{ font-size:clamp(1.15rem, 2.2vw, 1.6rem); line-height:1.26; font-family:var(--display); letter-spacing:-.012em; margin:0 0 1em; max-width:46ch; } /* The same trap as .lede, and it bit the moment the Credits label moved into the copy column: `.copy p` (0,1,1) beats `.label` (0,1,0), so the label rendered at body size with a body margin, and its rule stopped at 62ch while the list beneath it ran the full column. Two classes to win it back. */ .copy .label{font-size:.78rem; margin:0 0 4px; max-width:none} /* .copy .meta carries 1.6em to clear the paragraphs above it on About. Under a label there is nothing to clear, and the gap reads as a dropped heading. */ .copy .label + .meta{margin-top:0} /* ============================================================ DISPLAY TYPE The wordmark carries the real Owners XXNarrow; headings are Inter Tight, pushed heavy and tight to sit alongside it. ============================================================ */ .display{ font-family:var(--display); font-weight:800; font-size:clamp(2.6rem, 11vw, 9rem); line-height:.9; letter-spacing:-.038em; margin:0; text-wrap:balance; } .display-row{padding:var(--gutter); border-top:var(--rule)} /* Utility pages (About, Contact) get a smaller title. At show-title scale the word "About" ate the whole first screen and pushed every sentence of actual information below the fold. Show titles keep the big treatment. */ .display.sm{font-size:clamp(1.8rem, 4.2vw, 3.2rem); letter-spacing:-.03em} /* the About portrait, and a production's key art, sitting in the left column beside the copy. In a spread it needs air beneath it before the Credits label, or the caption and the label read as one block. */ .portrait{margin:0} .spread .portrait{margin-bottom:calc(var(--gutter) * .95)} .portrait img{display:block; width:100%; height:auto} .portrait figcaption{margin-top:8px} .copy .meta{margin-top:1.6em} /* ============================================================ IMAGES ============================================================ */ .strip{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:var(--gutter); padding:var(--gutter); border-top:var(--rule); } /* No cropping here. tools/images.py ships every frame at its final ratio — 2:1 for a hero, 3:2 for the grid — so the browser has nothing to decide and nothing changes shape between one window width and another. Cropping in CSS is what cut a performer's head off: a height cap discards more of the image the wider the screen gets. */ .strip figure{margin:0} .strip img{display:block; width:100%; height:auto} /* The hero breaks the page measure and runs edge to edge — the only element that does, so it reads as deliberate rather than as a stray full-width block. */ .strip.hero{border-top:0; padding:0} .strip.hero:not(.portrait){width:100vw; margin-inline:calc(50% - 50vw)} .strip.hero.portrait{max-width:min(520px, 100%); padding:var(--gutter)} .strip.hero figcaption{padding-inline:var(--gutter)} figcaption{font-size:.72rem; margin-top:6px; opacity:.75} /* A single picture that is a grace note, not a hero — Contact's. Full width it was 1290x645 on a laptop: a whole screen of face under a two-line address. The cap goes on the FIGURE, not the strip: capping the strip shortened its border-top with it, so the rule stopped in the middle of the page and read as a broken edge rather than a deliberate one. */ .strip.inset figure{max-width:min(600px, 100%)} .full{width:100%; height:auto; display:block} /* ============================================================ LIGHTBOX — enlarge a grid frame, with no JavaScript ------------------------------------------------------------ A :target panel. The thumbnail is a fragment link; the panel is display:none until the URL points at it, which also keeps it out of the accessibility tree and stops the browser fetching the large image until someone actually opens one. The ground is the PAGE's own colour, not a black scrim — the brand is colour pairs and one colour per page, so an enlarged Three Sisters frame sits on Sky and A Misanthrope on Choral. That also keeps the rule intact: black type on colour, never white type, which a black overlay would have forced. ============================================================ */ /* The affordance. Without it nothing says a thumbnail opens — and the marker only appears on hover so it never sits on the photograph while someone is looking at it. */ .zoom{display:block; position:relative; cursor:zoom-in} /* A plain "+", not an expand glyph. \2921 falls out of Inter to whatever the system has, and lands as a hairline scratch at this size; "+" is in every font, reads at 2em, and matches the zoom-in cursor. */ .zoom::after{ content:"+"; position:absolute; inset-block-end:0; inset-inline-end:0; width:2em; height:2em; display:grid; place-items:center; background:var(--type); color:var(--ground); font-family:var(--display); font-size:1.45rem; font-weight:500; line-height:1; opacity:0; transition:opacity .12s; } .zoom:hover::after, .zoom:focus-visible::after{opacity:1} /* a touch screen has no hover, so there it is always shown */ @media (hover:none){ .zoom::after{opacity:1} } .lightbox{display:none} .lightbox:target{ display:grid; place-items:center; position:fixed; inset:0; z-index:100; padding:clamp(12px, 4vw, 48px); background:var(--ground); } /* the click-off-to-close layer, beneath the picture */ .lb-back{position:absolute; inset:0; cursor:zoom-out} .lb-frame{position:relative; margin:0; max-width:100%; text-align:center} /* Fit, don't crop: the whole frame is inside the viewport at whatever shape it was shot. This is the one place a height limit is right, because nothing is discarded — the image scales instead of being trimmed. */ .lb-frame img{ display:block; margin:0 auto; max-width:100%; max-height:78vh; width:auto; height:auto; } .lb-frame figcaption{ margin-top:10px; opacity:1; font-size:.78rem; display:flex; flex-wrap:wrap; gap:4px 14px; justify-content:center; } .lb-count{font-family:var(--display); letter-spacing:.06em; opacity:.6} /* close and step controls — inverted pair, as the index hover is */ .lb-close, .lb-step{ position:absolute; z-index:2; display:grid; place-items:center; width:clamp(38px, 6vw, 48px); height:clamp(38px, 6vw, 48px); background:var(--type); color:var(--ground); font-family:var(--display); line-height:1; text-decoration:none; } .lb-close{inset-block-start:clamp(8px,2vw,20px); inset-inline-end:clamp(8px,2vw,20px); font-size:1.6rem} .lb-step{inset-block-start:50%; translate:0 -50%; font-size:1.9rem} .lb-prev{inset-inline-start:clamp(4px,1.5vw,16px)} .lb-next{inset-inline-end:clamp(4px,1.5vw,16px)} .lb-close:hover, .lb-step:hover, .lb-close:focus-visible, .lb-step:focus-visible{ background:var(--ground); color:var(--type); box-shadow:inset 0 0 0 1.5px currentColor; } /* On a phone the arrows would sit on top of the picture, so they go under it with the caption between them rather than over the photograph. */ @media (max-width:560px){ .lb-frame img{max-height:68vh} .lb-step{inset-block-start:auto; inset-block-end:clamp(8px,3vw,20px); translate:none} } /* ============================================================ PRODUCTION PAGE ============================================================ */ .meta{list-style:none; margin:0; padding:0; font-size:.9rem} .meta li{padding:7px 0; border-bottom:var(--rule)} .meta span{ display:block; font-family:var(--display); font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; opacity:.72; } blockquote{margin:0; padding-top:10px; border-top:var(--rule)} blockquote p{ font-family:var(--display); font-size:clamp(1.05rem,2vw,1.4rem); line-height:1.2; margin:0 0 8px; } blockquote cite{font-style:normal; font-size:.76rem; text-transform:uppercase; letter-spacing:.06em} .stars{letter-spacing:.1em} .quotes{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--gutter); padding:calc(var(--gutter) * 1.4) var(--gutter); border-top:var(--rule); } .quotes blockquote p{font-weight:500} @media (min-width:1100px){ .quotes{grid-template-columns:repeat(3,1fr)} } /* ============================================================ FOOTER ============================================================ */ footer{ padding:var(--gutter); border-top:var(--rule); display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; font-size:.8rem; } :focus-visible{outline:2.5px solid var(--type); outline-offset:3px}