/* ========================================================================= Study Trip gallery — study_trip.php ------------------------------------------------------------------------- Self-contained. Every selector is namespaced `st-*` so none of the legacy float grid in set2.css (.grid figure / .effect-ming) applies here; that ruleset stays untouched for the pages still using it. Replaces: float:left + width:23% + min-width:220px, which produced ragged row heights and horizontal scroll at 1200/992/800/768/360px. ========================================================================= */ /* ---- Hero ------------------------------------------------------------- */ /* The old markup used min-height:50% on .pimg1, which only resolved because an inline rule forced html,body{height:100%}. That made the scroll container instead of the document. Viewport units need no such crutch. */ .st-hero { position: relative; min-height: clamp(200px, 34vh, 420px); display: flex; align-items: center; justify-content: center; padding: 18px 14px; background-image: url('../img/image1.jpg'); background-size: cover; background-position: center 38%; background-repeat: no-repeat; overflow: hidden; } /* Light touch only. Contrast for the copy comes from the panel below, so the photo itself stays visible instead of being darkened to grey. */ .st-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, .10) 45%, rgba(0, 0, 0, .38) 100%); } /* The copy sits on its own panel: readable over any part of a busy photo without dimming the whole frame. */ .st-hero__inner { position: relative; z-index: 1; text-align: center; max-width: 680px; padding: 16px 20px 18px; border-radius: 14px; background: rgba(9, 10, 14, .52); box-shadow: 0 8px 30px rgba(0, 0, 0, .28); } .st-hero__eyebrow { text-align: center; margin: 0 0 10px; font-size: clamp(11px, 1.4vw, 13px); letter-spacing: .22em; text-transform: uppercase; color: #ffcf6b; font-weight: 700; } .st-hero__title { text-align: center; margin: 0; color: #fff; font-weight: 800; line-height: 1.1; font-size: clamp(26px, 5.2vw, 52px); letter-spacing: .04em; text-transform: uppercase; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); } .st-hero__sub { text-align: center; margin: 10px auto 0; max-width: 620px; color: rgba(255, 255, 255, .93); font-size: clamp(13px, 1.5vw, 16.5px); line-height: 1.5; /* misc.css / parallax_style.css set a tracked letter-spacing further up the tree, which stretches body copy and hurts readability at small sizes. */ letter-spacing: normal; } /* ---- Section shell ---------------------------------------------------- */ .st-section { padding: clamp(36px, 6vw, 72px) 0; background: #f6f7f9; } .st-wrap { width: min(1240px, calc(100% - 32px)); margin-inline: auto; } .st-head { text-align: center; margin-bottom: clamp(24px, 4vw, 44px); } .st-head__title { text-align: center; margin: 0; font-size: clamp(24px, 3.6vw, 40px); font-weight: 800; color: #16181d; letter-spacing: -.01em; } .st-head__rule { width: 64px; height: 4px; margin: 14px auto 0; border-radius: 4px; background: linear-gradient(90deg, #b8292f, #ff8a3d); } .st-head__sub { text-align: center; margin: 14px auto 0; max-width: 640px; color: #5b6070; font-size: clamp(14px, 1.6vw, 16px); line-height: 1.6; } /* ---- The grid --------------------------------------------------------- */ /* auto-fill + minmax reflows at every width on its own, so the 4->2->1 jump and the five horizontal-scroll breakpoints are gone without media queries. */ /* Mobile-first: a fixed 2-up on phones. An auto-fill minmax() large enough to look right on desktop (260px) can only ever fit ONE column in a 343px phone viewport, which is what stacked the cards one per row. Phones get an explicit 2-column track instead, and auto-fill takes over from 640px up. */ .st-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; } @media (min-width: 640px) { .st-grid { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(16px, 1.8vw, 26px); } } .st-card { position: relative; display: block; border-radius: 16px; overflow: hidden; background: #21242b; text-decoration: none; color: #fff; box-shadow: 0 2px 6px rgba(16, 18, 24, .10), 0 10px 26px rgba(16, 18, 24, .13); /* Transform ONLY. box-shadow is not a compositable property: transitioning it repaints the card on every frame, which is what made the hover feel laggy. The lift alone reads as the affordance. `will-change` is deliberately absent too - pinning a layer per card costs memory on pages with 38 tiles and buys nothing, since transform already promotes for the duration of the transition. */ transition: transform .28s cubic-bezier(.22, .61, .36, 1); } .st-card:hover, .st-card:focus-visible { transform: translateY(-6px); } .st-card:focus-visible { outline: 3px solid #ffcf6b; outline-offset: 3px; } /* Fixed 4:3 frame: every tile in a row is the same height, whatever the photo's own aspect ratio. The generated WebP is already cropped to 4:3, so object-fit has almost nothing left to trim. */ .st-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #2b2f37; } .st-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; /* translateZ(0) keeps the scale on the compositor instead of re-rasterising the photo each frame; without it a 800px WebP scaling inside a clipped box is the most expensive thing on the page. */ transform: translateZ(0); transition: transform .4s cubic-bezier(.22, .61, .36, 1); } .st-card:hover .st-card__media img, .st-card:focus-visible .st-card__media img { transform: scale(1.06) translateZ(0); } /* Caption sits over the photo, on its own scrim. */ .st-card__body { position: absolute; inset: auto 0 0 0; padding: 46px 16px 16px; background: linear-gradient(180deg, rgba(12, 13, 16, 0) 0%, rgba(12, 13, 16, .72) 52%, rgba(12, 13, 16, .92) 100%); } .st-card__tag { text-align: left; display: inline-block; margin-bottom: 7px; padding: 3px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: #10121a; background: #ffcf6b; } .st-card__title { text-align: left; margin: 0; font-size: clamp(15px, 1.7vw, 18px); font-weight: 700; line-height: 1.3; color: #fff; text-shadow: 0 1px 8px rgba(0, 0, 0, .45); } .st-card__cue { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 12.5px; font-weight: 600; color: #ffcf6b; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; } .st-card:hover .st-card__cue, .st-card:focus-visible .st-card__cue { opacity: 1; transform: translateY(0); } /* Touch devices get no hover, so the cue would never appear. Show it. */ @media (hover: none) { .st-card__cue { opacity: 1; transform: none; } } /* ---- Scroll reveal ---------------------------------------------------- */ /* The hidden state is gated behind .st-js, set by an inline script in the document head. With JS off the class never lands and the tiles render normally — hiding them in plain CSS would leave a blank page. */ .st-js .st-reveal { opacity: 0; transform: translateY(18px); transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .3, 1); } .st-js .st-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .st-card, .st-card__media img, .st-card__cue, .st-reveal { transition: none !important; } .st-card:hover, .st-card:focus-visible { transform: none; } .st-card:hover .st-card__media img { transform: none; } .st-js .st-reveal { opacity: 1; transform: none; } } /* ---- Compact phone card ----------------------------------------------- */ /* At 2-up on a 375px screen each tile is ~166px wide, so the desktop padding and type scale would swallow the photo. Everything shrinks to match. */ @media (max-width: 639px) { /* Compact hero: it should introduce the gallery, not fill the screen. */ .st-hero { min-height: 172px; padding: 14px 12px; } .st-hero__inner { padding: 12px 14px 14px; border-radius: 12px; } .st-hero__eyebrow { margin-bottom: 5px; font-size: 9.5px; letter-spacing: .16em; } .st-hero__title { font-size: 25px; } .st-hero__sub { margin-top: 7px; font-size: 12.5px; line-height: 1.45; } .st-head { margin-bottom: 18px; } .st-head__rule { width: 48px; height: 3px; margin-top: 10px; } .st-head__sub { margin-top: 10px; font-size: 13px; line-height: 1.5; } .st-card { border-radius: 12px; } .st-card__body { padding: 30px 10px 10px; } .st-card__tag { margin-bottom: 4px; padding: 2px 6px; font-size: 8.5px; letter-spacing: .08em; } .st-card__title { font-size: 12.5px; line-height: 1.25; } /* The hover cue can't fire on touch and costs a line of height per card. */ .st-card__cue { display: none; } .st-section { padding: 28px 0 34px; } .st-wrap { width: calc(100% - 24px); } } /* Very narrow phones (<=340px): 2-up leaves ~150px per tile. Still legible, but drop the tag so the title keeps two full lines. */ @media (max-width: 340px) { .st-card__tag { display: none; } } /* Venue line under the card title. Optional: study_trip.php only emits it for trips whose place is actually known, so the element may be absent. */ .st-card__place { display: flex; align-items: flex-start; gap: 5px; margin-top: 5px; font-size: 12px; font-weight: 500; line-height: 1.35; color: rgba(255, 255, 255, .82); text-align: left; letter-spacing: normal; text-shadow: 0 1px 6px rgba(0, 0, 0, .5); } .st-card__place::before { content: "\1F4CD"; /* round pushpin */ font-size: 10.5px; line-height: 1.5; flex: 0 0 auto; } @media (max-width: 639px) { .st-card__place { margin-top: 3px; font-size: 10.5px; line-height: 1.3; } .st-card__place::before { font-size: 9px; } }