/* ========================================================================== SACHDEVA GROUP — YARD GALLERY (#yard-details) ========================================================================== Loaded on gallery.html only, LAST — after css/card-fx.css. .mrnp-gal exists on no other page; every selector is scoped under #yard-details anyway. WHAT WAS WRONG — measured on the live page 1. THE PHOTOGRAPHS WERE BEING CROPPED TO THE WRONG SHAPE Five of the six files are 1152x648 and the sixth is 1259x848 — aerials, shot wide. css/marine-pages.css:732 forces `aspect-ratio: 4 / 3` on every tile with `object-fit: cover`, so a 16:9 frame lost roughly a quarter of its width to the crop. On an aerial of a plot, the width IS the subject. 2. THEY WERE GREY css/page-fx.css:973 sets `filter: saturate(.6) contrast(1.06) brightness(.94)` at rest and only lifts it on hover. Six desaturated thumbnails on #ffffff is why the section read as unfinished rather than as a gallery. 3. NOTHING WAS LABELLED UNTIL YOU POINTED AT IT .mrnp-gal__cap is `opacity: 0` until :hover, so at rest the gallery is six unidentified photographs — and on a touch device, where there is no hover, the captions were unreachable entirely. Every one of them is now permanent; the hover adds emphasis, not information. 4. SIX IDENTICAL CELLS A flat 3x3 grid of equal tiles gives the eye nowhere to enter. The mosaic below is arithmetic, not taste: on a 12-column grid at 18px gaps, a tile spanning 8 columns is 789px wide and the two spanning 4 beside it are 385px. Stack those two with one gap and the pair is 452px tall, which is what the span-8 tile then inherits — 789x452, a ratio of 1.75 against 16:9's 1.778. The feature tile is three-quarters of a percent off its own source ratio, and every other tile is exact. [ 1 ][ 2 ] [ 1 ][ 3 ] [ 4 ][ 5 ][ 6 ] ========================================================================== */ /* -------------------------------------------------------------------------- 1. The ground -------------------------------------------------------------------------- Kept light. The hero above ends in a white `.mrnp-hero__wave` path, so a dark gallery band — which is what photographs usually want — would leave a white wave stranded across the top of it. The section takes a cool wash instead, so the frames have something to sit on, and stays white at the very top where the wave lands. -------------------------------------------------------------------------- */ #yard-details { position: relative; background: radial-gradient(120% 60% at 50% 0%, rgba(53, 198, 244, .07), rgba(53, 198, 244, 0) 60%), linear-gradient(180deg, #ffffff 0%, #f4f8fc 40%, #eaf1f7 100%); } #yard-details > .mrn-container { position: relative; z-index: 1; } #yard-details .mrn-center { max-width: 720px; margin-left: auto; margin-right: auto; } #yard-details .mrn-lead { margin: 16px auto 0; font-size: 15.5px; line-height: 1.78; color: var(--body-on-light, #4a6076); } /* -------------------------------------------------------------------------- 2. The mosaic -------------------------------------------------------------------------- */ /* minmax(0, 1fr), NOT 1fr. `1fr` is shorthand for `minmax(auto, 1fr)`, and a track's auto minimum is its content's min-content width — which for a grid item holding a 1152px photograph is large. Measured with plain 1fr: the columns under the feature tile came out wider than the ones beside it, so two tiles with an identical `span 4` rendered 385px and 362px, and the feature tile's ratio drifted to 1.48 against a 1.78 source. Zeroing the minimum is what makes twelve equal columns actually equal. */ #yard-details .mrnp-gal { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; margin-top: 46px; } /* every tile carries the source ratio; the feature tile is the one exception, and it takes its height from the two stacked beside it instead */ #yard-details .mrnp-gal__item { aspect-ratio: 16 / 9; grid-column: span 4; border-radius: 14px; border: 1px solid rgba(7, 26, 46, .10); background: var(--ink, #071a2e); box-shadow: 0 1px 2px rgba(7, 26, 46, .06), 0 4px 10px -4px rgba(7, 26, 46, .16), 0 26px 50px -32px rgba(7, 26, 46, .6); transition: transform .5s var(--e-out, cubic-bezier(.16, 1, .3, 1)), box-shadow .5s var(--e-out, cubic-bezier(.16, 1, .3, 1)), border-color .5s var(--e-out, cubic-bezier(.16, 1, .3, 1)); } #yard-details .mrnp-gal__item:nth-child(1) { grid-column: span 8; grid-row: span 2; /* height comes from the two tiles stacked in the column beside it, so the ratio must not be pinned or the row spans fight each other. It stretches to 217 + 18 + 217 = 452 against a width of 789, which is 1.75 — the feature photograph is cover-cropped by under two percent off 16:9. */ aspect-ratio: auto; } /* -------------------------------------------------------------------------- 3. The photograph -------------------------------------------------------------------------- */ /* TAKEN OUT OF THE SIZING. css/marine-pages.css:737 leaves the image in flow at width/height 100%, and in a grid item whose height is `auto` a percentage height is indefinite — so the image falls back to its intrinsic size and the item is sized by the photograph. images/gallery/1.jpg is 1259x848 where the other five are 1152x648, so the feature tile inherited a 1.485 ratio, forced rows 1 and 2 to 257px each, and left 40px of dead space under the two tiles beside it. Absolutely positioned, the image contributes nothing to track sizing and every tile's height comes from its aspect-ratio or its row span alone. */ #yard-details .mrnp-gal__item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* .6 was grey. .9 still reads as one graded set rather than six unrelated snapshots, but it is recognisably a photograph before you touch it. */ filter: saturate(.9) contrast(1.03); transform: scale(1.005); /* hairline-proof: a scaled-down image can leave a 1px seam at the corner radius on fractional layouts */ transition: transform 1.1s var(--e-out, cubic-bezier(.16, 1, .3, 1)), filter .6s var(--e-out, cubic-bezier(.16, 1, .3, 1)); } /* --- the permanent scrim ------------------------------------------------ ::before, because ::after is already the hover scrim in css/marine-pages.css:744. This one never fades: it is what makes the caption legible at rest, and a caption that needs a pointer to appear is not a caption. */ #yard-details .mrnp-gal__item::before { content: ""; position: absolute; inset: auto 0 0 0; height: 58%; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(4, 18, 31, 0) 0%, rgba(4, 18, 31, .34) 46%, rgba(4, 18, 31, .82) 100%); } /* re-cut of marine-pages.css:744 — it stopped at 40% and went to .85 of the OLD navy; this one only has to deepen what ::before already laid down */ #yard-details .mrnp-gal__item::after { background: linear-gradient(180deg, rgba(4, 18, 31, 0) 22%, rgba(4, 18, 31, .40) 58%, rgba(4, 18, 31, .90) 100%); z-index: 2; transition: opacity .45s var(--e-out, cubic-bezier(.16, 1, .3, 1)); } /* -------------------------------------------------------------------------- 4. The caption -------------------------------------------------------------------------- */ #yard-details .mrnp-gal__cap { left: 20px; right: 62px; bottom: 17px; z-index: 3; /* the whole point: visible without a pointer */ opacity: 1; transform: none; font-family: var(--font-display, "Oswald", sans-serif); font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #ffffff; text-shadow: 0 1px 10px rgba(4, 18, 31, .8); transition: transform .45s var(--e-out, cubic-bezier(.16, 1, .3, 1)); } /* a cyan rule that draws itself under the caption on hover */ #yard-details .mrnp-gal__cap::after { content: ""; display: block; width: 0; height: 2px; margin-top: 8px; border-radius: 1px; background: linear-gradient(90deg, var(--cyan-bright, #35c6f4), var(--cyan-deep, #1195cf)); transition: width .5s var(--e-out, cubic-bezier(.16, 1, .3, 1)); } #yard-details .mrnp-gal__item:nth-child(1) .mrnp-gal__cap { font-size: 15px; left: 26px; bottom: 22px; } /* -------------------------------------------------------------------------- 5. The zoom affordance -------------------------------------------------------------------------- Moved out of the middle of the photograph. A 56px disc centred on the frame covers the subject — which on these aerials is the vessel — and it is the one part of the composition a viewer is trying to see. Corner instead, so it says "openable" without standing on the picture. -------------------------------------------------------------------------- */ #yard-details .mrnp-gal__zoom { left: auto; top: 14px; right: 14px; margin: 0; width: 38px; height: 38px; border-radius: 9px; z-index: 3; background: rgba(7, 26, 46, .62); border: 1px solid rgba(255, 255, 255, .28); color: #ffffff; opacity: 0; transform: translateY(-6px) scale(.94); transition: opacity .38s var(--e-out, cubic-bezier(.16, 1, .3, 1)), transform .42s var(--e-out, cubic-bezier(.16, 1, .3, 1)), background .38s var(--e-out, cubic-bezier(.16, 1, .3, 1)), border-color .38s var(--e-out, cubic-bezier(.16, 1, .3, 1)); } #yard-details .mrnp-gal__zoom svg { width: 18px; height: 18px; } /* -------------------------------------------------------------------------- 6. Hover and focus -------------------------------------------------------------------------- :focus-visible is mirrored throughout. js/marine-pages.js promotes these anchors — they carry no href — to role="button" with a tab stop, so they are reachable by keyboard and the same state has to be available there. -------------------------------------------------------------------------- */ #yard-details .mrnp-gal__item:hover, #yard-details .mrnp-gal__item:focus-visible { transform: translateY(-6px); border-color: rgba(53, 198, 244, .55); box-shadow: 0 2px 4px rgba(7, 26, 46, .08), 0 10px 22px -10px rgba(7, 26, 46, .3), 0 40px 70px -34px rgba(7, 26, 46, .7), 0 22px 50px -30px rgba(34, 179, 230, .55); } #yard-details .mrnp-gal__item:focus-visible { outline: 2px solid var(--cyan-deep, #1195cf); outline-offset: 3px; } #yard-details .mrnp-gal__item:hover img, #yard-details .mrnp-gal__item:focus-visible img { filter: saturate(1.05) contrast(1); transform: scale(1.06); } #yard-details .mrnp-gal__item:hover .mrnp-gal__cap, #yard-details .mrnp-gal__item:focus-visible .mrnp-gal__cap { transform: translateY(-3px); } #yard-details .mrnp-gal__item:hover .mrnp-gal__cap::after, #yard-details .mrnp-gal__item:focus-visible .mrnp-gal__cap::after { width: 44px; } #yard-details .mrnp-gal__item:hover .mrnp-gal__zoom, #yard-details .mrnp-gal__item:focus-visible .mrnp-gal__zoom { opacity: 1; transform: none; background: var(--cyan-deep, #1195cf); border-color: transparent; } /* ========================================================================== 7. Responsive -------------------------------------------------------------------------- css/marine-pages.css:1820 and :1950 step .mrnp-gal to 2 columns and then 1. Those cannot reach a 12-column mosaic, so the steps are restated here — the feature tile widens and gives up its row span, and below that everything is a single 16:9 column. ========================================================================== */ @media (max-width: 1100px) { #yard-details .mrnp-gal { gap: 15px; } #yard-details .mrnp-gal__item { grid-column: span 6; } #yard-details .mrnp-gal__item:nth-child(1) { grid-column: span 12; grid-row: auto; aspect-ratio: 16 / 9; } #yard-details .mrnp-gal__item:nth-child(1) .mrnp-gal__cap { font-size: 14px; } } @media (max-width: 700px) { #yard-details .mrnp-gal { gap: 13px; margin-top: 34px; } #yard-details .mrnp-gal__item, #yard-details .mrnp-gal__item:nth-child(1) { grid-column: span 12; } #yard-details .mrn-lead { font-size: 15px; } /* no hover on a phone, so the affordance that only appears on hover has to be present — it is the only thing marking these as openable */ #yard-details .mrnp-gal__zoom { opacity: 1; transform: none; } #yard-details .mrnp-gal__cap { font-size: 12px; letter-spacing: 1.2px; } } /* the same, keyed on the pointer rather than the width — a touch tablet at 900px has no hover either */ @media (hover: none) { #yard-details .mrnp-gal__zoom { opacity: 1; transform: none; } } /* ========================================================================== 8. Reduced motion Material stays, movement goes: the scrims, the colour, the caption and the cyan edge are all kept. The 6px lift, the 1.06 push-in and the rule that draws itself are movement, and are not. ========================================================================== */ @media (prefers-reduced-motion: reduce) { #yard-details .mrnp-gal__item, #yard-details .mrnp-gal__item img, #yard-details .mrnp-gal__item::after, #yard-details .mrnp-gal__cap, #yard-details .mrnp-gal__cap::after, #yard-details .mrnp-gal__zoom { transition: none; } #yard-details .mrnp-gal__item:hover, #yard-details .mrnp-gal__item:focus-visible { transform: none; } #yard-details .mrnp-gal__item:hover img, #yard-details .mrnp-gal__item:focus-visible img { transform: scale(1.005); } #yard-details .mrnp-gal__item:hover .mrnp-gal__cap, #yard-details .mrnp-gal__item:focus-visible .mrnp-gal__cap { transform: none; } #yard-details .mrnp-gal__item:hover .mrnp-gal__zoom, #yard-details .mrnp-gal__item:focus-visible .mrnp-gal__zoom { transform: none; } }