/* ============================================================================ contact · page sheet, scoped to body.ctc One split above the fold with a six frame gallery on the left and a single scrolling information column on the right, the address and the opening hours stacked in that column as labelled blocks, a wide short Google map strip under them with an "Open in Google Maps" link, and a phone number that floats over the page as a pill you can copy plus a disc that dials. Nothing else on the page is a section. Type is the Phenome ladder: one family, four statement sizes and four inks (phenome-glass.css § 3), so a label is sentence case at 600 in the heading ink and the promise line is the only blue on a white page. That was settled for the whole store on 2026-09-16 when the capitals overline was retired, and this page is the first one drawn after it. Three traps from the shared sheets shape this file: - shared.css reveals `main > section > *` with a transform. The gallery track therefore moves on the independent `translate` property, which the reveal cannot overwrite, and the arrows and dots sit OUTSIDE that first child so a section that has not been revealed yet still has working controls. - phenome-glass.css forces `text-transform: none !important`, so capitals would have to be typed. None are. - tokens.json records `elevation YOK`. Nothing on the page lifts. The only shadows in this file are on the two floating controls, which have no ground of their own, and they use the system's own lift and press. ========================================================================= */ .ctc { --ctc-rule: var(--divider, #203a8514); --ctc-edge: var(--border-strong, #203a8529); --ctc-sunk: var(--gl-tint-sunk, #f4f6fb); --ctc-ink: var(--ph-tone-head, #10214b); --ctc-body: var(--ph-tone-body, #4a5578); --ctc-quiet: var(--ph-tone-quiet, #8b93ad); --ctc-blue: var(--phenome-blue-500, #203a85); --ctc-ease: var(--ease-frosted-out, cubic-bezier(.16, 1, .3, 1)); background: #fff; } /* --------------------------------------------------------------------------- 1 · THE SPLIT The gallery and the information column share one row at equal width and the taller of the two sets the height. Both tracks are floored at zero: 1fr carries an automatic min-content minimum, and the map iframe plus one long address line would otherwise push the grid wider than the page. 96px of top padding rather than the hero's 84: there is no eyebrow sitting on a grey wash here, the page opens on white, and the gallery's top edge needs the extra clearance from the 44px bar to read as a deliberate margin rather than as a near miss. ------------------------------------------------------------------------ */ .ctc-split-sec { padding: clamp(24px, 3vw, 48px) 0 clamp(64px, 7vw, 112px); } .ctc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(32px, 4.4vw, 72px); align-items: start; } /* --------------------------------------------------------------------------- 2 · THE GALLERY Six frames on a track, one visible, moved by `translate` alone. A crossfade was drawn first and thrown out: these are six views of the same building at the same colour temperature, and dissolving between them read as a fault in the image rather than as a change of frame. 4 / 5 holds at every width, so the column never jumps height when a frame with a different intrinsic size arrives. ------------------------------------------------------------------------ */ /* The gallery is STICKY and the column beside it is not. Both columns could be loose if the right hand column were a few short blocks; ours carries the four doors, the address, the hours and the map, and at 1440 that is nearly twice the gallery's height. Left loose, the photographs scroll away in the first second and the reader spends the rest of the page beside an empty half. It takes TWO elements, and the reason is the one thing about sticky inside a grid that is not obvious: a sticky box travels inside its containing block, and for a grid item that block is its own grid area. Under `align-items: start` the item is not stretched, so its area is exactly its own height and there is nowhere to travel — which is what the first draft of this did, and it scrolled away like everything else. So `.ctc-gal` is the item, stretched to the full row, and the sticky box is the child inside it. Sticky is also safe under shared.css's reveal: that rule animates `transform` on this element's PARENT and lands on `transform: none`, which does not create a containing block, so the only window in which sticky is suspended is the 620ms of the reveal itself, before anything has scrolled. */ .ctc-gal { align-self: stretch; } .ctc-gal-stick { position: sticky; top: calc(var(--ph-nav-h, 44px) + 24px); } @media (max-width: 1080px) { .ctc-gal-stick { position: relative; top: auto; } } .ctc-gal-frame { position: relative; /* `width: 100%` is not redundant next to `aspect-ratio`. With `width: auto` the ratio is free to resolve the box from EITHER axis, so `min-height` below turned into a min-WIDTH of 475px at 390 and pushed the whole page sideways. The width is stated, and the ratio then only ever decides the height. */ width: 100%; aspect-ratio: 4 / 5; /* The frame is capped so that IT AND ITS CAPTION both fit on the screen the sticky column is pinned to: 116 above it BEFORE it pins (72 of section padding under the 44px bar), 36 of caption rail below it, and 98 of clearance under that, which is where the floating number sits. The unpinned figure is the one that has to be used — it is the larger, and it is the state the page opens in. Left uncapped, a 4/5 frame at this column width is 741px tall and the caption runs under the pill. object-fit: cover absorbs the change in ratio, so nothing is distorted, only cropped. svh, not vh: on a phone browser vh is the height with the toolbars HIDDEN, which is not the height anything is being looked at. */ max-height: calc(100svh - 170px); min-height: 380px; border-radius: var(--ph-r27, 27px); overflow: hidden; background: var(--ctc-sunk); /* The hairline is the pane boundary the glass layer gives every surface, not an elevation. A photograph that runs to a soft edge on a white page loses its corner radius at the top, where these interiors are almost white. */ box-shadow: var(--gl-inner, inset 0 0 0 1px #10214b0f); touch-action: pan-y; cursor: grab; } .ctc-gal-frame:active { cursor: grabbing; } .ctc-track { /* The list reset is load bearing, not housekeeping: a