/* Page group "home": index.html, about.html, gallery.html.
Layered into `pages` (above components, below utilities). Semantic tokens only. */
@layer pages {
/* =========================================================== index */
/* Hero: crop the orienteering photo toward the flag and the kids */
.hero__media > img { object-position: 60% 45%; }
@media (min-width: 64em) {
/* desktop: the hero column is near-square (narrower than the 3:2 photo),
so slide right to keep the orienteering control flag (the page's
motif) in frame at 1024-1440 */
.hero__media > img { object-position: 85% 45%; }
}
/* 活動類別 routes */
.route--outdoor .route__media img { object-position: 66% 50%; }
.home-routes .route__body > p { text-wrap: pretty; }
/* the title link is the route's tappable entry (thumbnail link is
aria-hidden); give it a full 44px tap target */
.home-routes .route__body h3 a {
display: inline-flex;
align-items: center;
min-height: var(--tap);
}
@media (max-width: 63.99em) {
/* spec 5.11: 88x88 square thumbnails in the mobile rows. The square AI
PNGs must never show their bottom-right badge at 1:1 (spec 6), so the
image is drawn ~18% larger than the frame and anchored top-left: the
overflow (and the badge) is clipped off the right and bottom edges. */
.home-routes .route__media {
width: 88px;
aspect-ratio: 1;
}
.home-routes .route__media img {
width: 118%;
max-width: none;
height: 118%;
aspect-ratio: auto;
object-fit: cover;
object-position: var(--obj-square);
}
.home-routes .route--outdoor .route__media img {
/* 3:2 photo, no badge: plain cover crop on the subject */
width: 100%;
height: 100%;
object-position: 66% 50%;
}
}
@media (min-width: 64em) {
/* one shared photo height per row, so the route bodies line up across
the 7/5 and 5/7 columns like a contents spread */
.home-routes .route__media img,
.home-routes .route:nth-child(4n+1) .route__media img,
.home-routes .route:nth-child(4n) .route__media img {
aspect-ratio: auto;
height: clamp(15rem, 22vw, 20rem);
}
.home-routes .route { align-content: start; }
}
/* 關於我們 split: photo first on mobile would push the notes down, so
keep text first (component default) and give the notes a little air */
.home-about .split__media img { object-position: 50% 40%; }
.home-about .field-notes { margin-top: 0; }
/* the photo spans its full column (16px gutters on mobile, the grid edge
on desktop), so no margin is reserved for an offset frame. No offset
contour frame here either: behind a 4:3 photo with a small inset the
sparse contour only leaks out as a few stray strokes past the right and
bottom edges, which read as rendering debris. The hero keeps the motif. */
.home-about .split__media { margin: 0; }
.home-about .split__media.topo::before { content: none; }
.home-about__more { margin-top: var(--space-5); }
@media (min-width: 64em) {
/* field notes read better as a single column next to the photo */
.home-about .split > .split__text { grid-column: 1 / span 6; }
.home-about .split > .split__media { grid-column: 8 / -1; align-self: center; }
}
/* 熱門活動 feature cards */
.card--climbing .card__media img { object-position: 50% 25%; }
@media (min-width: 64em) {
/* the tall climbing photo absorbs the extra row height instead of
leaving an empty gap above 了解更多 */
.card-grid--feature > .card--climbing .card__media {
position: relative;
flex: 1 1 auto;
aspect-ratio: auto;
min-height: 26rem;
}
.card-grid--feature > .card--climbing .card__media img {
position: absolute;
inset: 0;
}
.card-grid--feature > .card--climbing .card__body { flex: 0 0 auto; }
.card-grid--feature > .card--climbing .card__body h3 { font-size: var(--step-2); }
}
.card--telescope .card__media img,
.card--space .card__media img { object-position: 50% 50%; }
/* =========================================================== about */
.masthead--split .masthead__media > img[src*="wegrow-team"] { object-position: 50% 40%; }
/* 我們的故事: sticky head (cols 1-4) + standfirst and body (cols 6-12) */
.about-story__head {
border-top: 2px solid var(--color-rule-strong);
padding-top: var(--space-4);
}
.about-story__body > p { max-width: var(--measure); }
.about-story__body > p + p { margin-top: var(--space-4); }
.about-story__body > .about-story__standfirst {
max-width: 30em;
margin-bottom: var(--space-6);
font: 700 var(--step-2)/1.6 var(--font-display);
letter-spacing: var(--tracking-cjk);
color: var(--color-text);
}
@media (min-width: 64em) {
.about-story__head {
grid-column: 1 / span 4;
position: sticky;
top: calc(var(--header-h) + var(--space-5));
align-self: start;
margin-bottom: 0;
}
.about-story__body { grid-column: 6 / -1; }
}
/* 使命 / 願景 */
.pledge {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--space-7) var(--space-7);
}
@media (min-width: 64em) {
.pledge { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pledge__item {
border-top: 2px solid var(--color-rule-strong);
padding-top: var(--space-4);
}
.pledge__label {
display: flex;
align-items: center;
gap: var(--space-3);
font: 600 var(--step--1)/1.4 var(--font-mono);
letter-spacing: var(--tracking-mono);
color: var(--color-kicker);
}
.pledge__label i {
font-size: 1rem;
color: var(--color-accent-ink);
}
.pledge__statement {
margin-top: var(--space-4);
max-width: 24em;
font: 700 var(--step-2)/1.6 var(--font-display);
letter-spacing: var(--tracking-cjk);
color: var(--color-text);
text-wrap: pretty;
}
/* 我們的價值觀 (same alt section, below the pair) */
.about-values { margin-top: var(--section-pad); }
.about-values .section-title {
display: flex;
align-items: center;
gap: var(--space-3);
}
.about-values .section-title i {
font-size: 1.25rem;
color: var(--color-accent-ink);
}
.about-values ol.values > li { line-height: 1.7; }
/* label and description run on as one sentence (the li is a 2-column grid
with the counter, so the pair is wrapped in one ) */
.about-values .values__text { margin: 0; }
.about-values ol.values strong { display: inline; color: var(--color-text); }
/* =========================================================== gallery */
.gallery { padding-top: var(--space-7); }
/* Text tiles: activities we have no photograph of. Rendered as an index
card (contour plate with the caption set inside it), so they never read
as an empty photo frame and the title is not repeated. */
.gallery-grid > .g-tile--text {
display: grid;
grid-template: minmax(0, 1fr) / minmax(0, 1fr);
border-radius: var(--radius-s);
overflow: hidden;
}
.g-tile--text > .plate,
.g-tile--text > .gallery-caption { grid-area: 1 / 1; }
.g-tile--text > .plate {
--topo-size: 560px;
height: auto;
min-height: 12rem;
aspect-ratio: auto;
border-radius: 0;
border-top: 3px solid var(--color-accent);
}
.g-tile--text > .plate .plate__label {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--color-kicker);
}
.g-tile--text > .plate .plate__label::before {
content: "";
width: .7rem;
height: .7rem;
border: 2px solid var(--color-marker);
background: linear-gradient(135deg, transparent 0 50%, var(--color-marker) 50% 100%);
}
.g-tile--text > .gallery-caption {
position: relative;
align-self: end;
padding: var(--space-8) var(--space-5) var(--space-5);
}
.g-tile--text > .gallery-caption h3 {
font: 900 var(--step-2)/1.25 var(--font-display);
letter-spacing: var(--tracking-cjk);
}
.g-tile--text > .gallery-caption p {
margin-top: var(--space-2);
max-width: 22em;
font-size: var(--step-0);
color: var(--color-text);
}
.g-tile--orienteering .g-tile__open img { object-position: 60% 50%; }
.g-tile--climbing .g-tile__open img { object-position: 50% 25%; }
.g-tile--camp .g-tile__open img { object-position: 50% 30%; }
.g-tile--kayak .g-tile__open img { object-position: 50% 55%; }
.g-tile--challenge .g-tile__open img { object-position: var(--obj-square); }
/* 教會退修 square: the circle of people sits at 47-65% of the frame height
and the AI badge at 93-97%. At 62% the ~8:3 wide crop (36-46% of the
height visible) runs about 40-76% and the 4:3 crop (filtered or mobile)
about 16-91%, so faces stay in frame and the badge stays out. */
.g-tile--retreat .g-tile__open img { object-position: 50% 62%; }
}