/* Park site stylesheet. Tokens follow docs/brand/identity.md and docs/DIRECTION.md. The accent is set per park on and is allowed only on the monogram, the map's entrances, rating bars and link underlines. */ @font-face { font-family: "General Sans"; src: url("/assets/fonts/GeneralSans-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/assets/fonts/GeneralSans-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "General Sans"; src: url("/assets/fonts/GeneralSans-Semibold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } :root { --ground: #ffffff; --surface: #f3f5f1; --ink: #14201a; --ink-2: #4a5750; --line: #c9d1c8; --track: #e4e9e2; --focus: #1d5fd1; --star: #b87700; --warn-ink: #8a2e08; --warn-bg: #fff1e6; --accent: #0b6e99; --font: "General Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; --wrap: 1120px; --gutter: 20px; --measure: 68ch; --radius: 12px; --pill: 999px; } .accent-water { --accent: #0b6e99; } .accent-pine { --accent: #2f6b3c; } .accent-rose { --accent: #a8325f; } .accent-grass { --accent: #4e7512; } .accent-sandstone { --accent: #86562a; } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 400 16px/1.55 var(--font); color: var(--ink); background: var(--ground); font-kerning: normal; } img, svg { max-width: 100%; height: auto; } h1, h2, h3, p, ul, figure, dl, dd, blockquote { margin: 0; } ul { padding: 0; list-style: none; } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } a:hover { text-decoration-thickness: 2.5px; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .muted { color: var(--ink-2); } .icon { flex: none; } .skip-link { position: absolute; left: 12px; top: -48px; padding: 10px 14px; background: var(--ink); color: #fff; border-radius: 8px; z-index: 10; text-decoration: none; } .skip-link:focus { top: 12px; } /* Header */ .site-header { border-bottom: 1px solid var(--line); background: var(--ground); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; } .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; } .brand__mark { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 600; font-size: 13px; letter-spacing: 0.02em; } .brand__name { font-weight: 600; font-size: 16px; line-height: 1.2; } .site-nav { display: none; gap: 24px; } .site-nav a { text-decoration: none; font-weight: 500; font-size: 15px; padding: 10px 0; } .site-nav a:hover { text-decoration: underline; text-decoration-color: var(--accent); } /* Fold */ .fold { padding-bottom: 36px; } .fold__text { padding-top: 20px; } .gallery { position: relative; } .gallery__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .gallery__track::-webkit-scrollbar { display: none; } .gallery__slide { flex: 0 0 100%; scroll-snap-align: start; } .photo--gallery img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); } .photo--gallery .photo__credit { padding: 8px var(--gutter) 0; } .photo__credit { font-size: 13px; line-height: 1.45; color: var(--ink-2); } .photo__credit a { color: var(--ink-2); text-decoration-color: var(--line); } .gallery__controls { position: absolute; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 2px; background: rgba(255, 255, 255, 0.94); border-radius: var(--pill); padding: 2px; box-shadow: 0 2px 10px rgba(20, 32, 26, 0.16); } .gallery__button { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); cursor: pointer; } .gallery__button:hover { background: var(--surface); } .gallery__count { font-size: 14px; font-weight: 500; padding: 0 4px; font-variant-numeric: tabular-nums; } .gallery__all { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px 0 12px; margin-left: 2px; border-left: 1px solid var(--line); font-size: 14px; font-weight: 500; color: var(--ink); text-decoration: none; white-space: nowrap; } .gallery__all:hover { text-decoration: underline; text-decoration-color: var(--accent); } .title-block__name { font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; } .title-block__answer { margin-top: 12px; font-size: 17px; line-height: 1.5; max-width: 46ch; } .facts-line { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 16px; font-size: 15px; font-weight: 500; } .facts-line li { display: inline-flex; align-items: center; gap: 6px; } .facts-line .icon { color: var(--ink-2); } .rating-line { display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 15px; } .rating-line__star { display: inline-flex; color: var(--star); } .rating-line__value { font-weight: 600; } .rating-line__sep { color: var(--ink-2); } .actions { display: grid; grid-template-columns: 1.35fr 1fr; gap: 10px; margin-top: 20px; } .actions__alt { margin-top: 12px; font-size: 14px; color: var(--ink-2); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--pill); font: 500 16px/1.2 var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; } .btn--primary { background: var(--ink); color: #fff; } .btn--primary:hover { background: #26362d; } .btn--secondary { border: 1.5px solid var(--ink); color: var(--ink); background: var(--ground); } .btn--secondary:hover { background: var(--surface); } .stats { display: flex; gap: 32px; margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); } .stat dt { font-size: 13px; color: var(--ink-2); } .stat dd { font-weight: 600; font-size: 18px; } /* Sections */ .section { padding-block: 56px; } .section + .section { border-top: 1px solid var(--line); } .section--surface { background: var(--surface); border-top: 0 !important; } .section--surface + .section { border-top: 0; } .section__title { font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -0.01em; text-wrap: balance; } .section__intro { margin-top: 12px; font-size: 17px; max-width: var(--measure); } .section__intro + * { margin-top: 24px; } .section__title + :not(.section__intro) { margin-top: 20px; } .subhead { font-size: 18px; font-weight: 500; margin: 28px 0 10px; } .plain-list li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; } .plain-list .icon { margin-top: 3px; color: var(--ink-2); } .link-strong { font-weight: 500; } .page-head { padding: 40px 0 8px; } .page-head h1 { font-size: 32px; line-height: 1.15; font-weight: 600; letter-spacing: -0.015em; text-wrap: balance; } .page-head__answer { margin-top: 12px; font-size: 17px; max-width: var(--measure); } .page-head .actions { grid-template-columns: auto; justify-content: start; } .back-link { padding-block: 32px 48px; } .trust { border-top: 1px solid var(--line); padding-block: 20px; font-size: 14px; color: var(--ink-2); } .site-footer { background: var(--surface); padding-block: 40px 48px; font-size: 15px; } .site-footer__line { font-weight: 600; font-size: 16px; } .site-footer p + p, .site-footer p + ul, .site-footer ul + p { margin-top: 12px; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 8px 24px; } .site-footer__links a { display: inline-block; padding: 8px 0; } .site-footer__credits { font-size: 13px; color: var(--ink-2); } .site-footer__credits a { color: var(--ink-2); } @media (min-width: 600px) { :root { --gutter: 28px; } .site-nav { display: flex; } .actions { grid-template-columns: auto auto; justify-content: start; } } @media (min-width: 1000px) { body { font-size: 17px; } :root { --gutter: 32px; } .fold { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 40px; max-width: var(--wrap); margin-inline: auto; padding: 32px var(--gutter) 56px; align-items: start; } .fold__text { padding: 8px 0 0; } .fold .wrap { padding-inline: 0; } .photo--gallery img { aspect-ratio: 3 / 2; border-radius: 14px; } .photo--gallery .photo__credit { padding-inline: 0; } .title-block__name { font-size: 44px; } .section { padding-block: 80px; } .section__title { font-size: 28px; } .page-head { padding-top: 56px; } .page-head h1 { font-size: 40px; } } @media (prefers-reduced-motion: no-preference) { .gallery__track { scroll-behavior: smooth; } } /* Home lane: section styles for the home page (what is here, getting there, reviews, safety, photos, history). Tokens come from base.css; the accent appears only where identity.md allows (rating bars and link underlines). Space separates groups; hairlines are kept to group edges. */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Fold without a photo: the title block stands alone, set a little lower so it does not crowd the header. */ .fold--text-only .fold__text { padding-top: 32px; } /* ---------- What's here */ .whats-here { display: grid; gap: 32px; } .facility-list { display: grid; gap: 4px; } .facility { break-inside: avoid; } .facility { display: flex; gap: 14px; align-items: flex-start; padding: 10px 0; } .facility__icon { display: inline-grid; place-items: center; flex: none; width: 24px; height: 24px; margin-top: 1px; color: var(--ink); } .facility__text { display: flex; flex-direction: column; gap: 2px; } .facility__label { font-weight: 500; font-size: 17px; line-height: 1.35; } .facility__note { font-size: 14px; line-height: 1.45; color: var(--ink-2); } .facility-list--quiet .facility__icon { color: var(--ink-2); } .facility-list--quiet .facility__label { font-size: 16px; } .whats-here__side { display: grid; gap: 24px; padding-top: 24px; border-top: 1px solid var(--line); } .whats-here__side .subhead { margin: 0 0 4px; font-size: 16px; color: var(--ink-2); } /* Not recorded yet: one quiet line after What's here (or after the fold when a park lists no facilities). */ .not-recorded { display: flex; gap: 10px; align-items: flex-start; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-2); max-width: var(--measure); } .not-recorded .icon { flex: none; margin-top: 3px; } .not-recorded-band { padding-top: 8px; } .not-recorded-band .not-recorded { margin-top: 0; } /* Under the home map on tier M and L parks: Get directions and the link to every way in, on one row when they fit. */ .home-map-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 22px; } /* ---------- Getting there */ .getting-there { display: grid; gap: 28px; } .getting-there__address { display: flex; gap: 12px; align-items: flex-start; } .getting-there__address .icon { margin-top: 2px; flex: none; } .getting-there__address > span { display: flex; flex-direction: column; } .getting-there__groups { display: grid; gap: 28px; } .info-group .subhead { margin: 0 0 6px; } .info-list { display: grid; gap: 2px; } .info-row { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; } .info-row__icon { display: inline-flex; flex: none; margin-top: 2px; color: var(--ink); } .info-row__text { display: flex; flex-direction: column; } .info-row__label { font-weight: 500; } .info-row__meta { font-size: 14px; line-height: 1.45; color: var(--ink-2); } .info-group__note { margin-top: 8px; font-size: 14px; color: var(--ink-2); max-width: 44ch; } .getting-there__more { margin: 0; } /* ---------- What visitors say */ .reviews { display: grid; gap: 36px; } .reviews__big { display: flex; align-items: baseline; gap: 10px; font-size: 56px; line-height: 1; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .reviews__star { display: inline-flex; align-self: center; color: var(--star); } .reviews__outof { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); } .reviews__meta { margin-top: 10px; font-size: 14px; color: var(--ink-2); } .reviews__link { margin-top: 18px; } .bars { margin-top: 18px; display: grid; gap: 8px; max-width: 380px; } .bars__row { display: grid; grid-template-columns: 48px 1fr 44px; align-items: center; gap: 10px; font-size: 14px; } .bars__label { color: var(--ink-2); } .bars__track { height: 8px; border-radius: var(--pill); background: var(--track); overflow: hidden; } .bars__fill { display: block; height: 100%; min-width: 3px; border-radius: var(--pill); background: var(--accent); } .bars__count { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; } .reviews__summary { max-width: var(--measure); font-size: 17px; } .reviews__lists { display: grid; gap: 4px 40px; margin-top: 8px; } .reviews__lists .subhead { margin: 20px 0 8px; font-size: 17px; } .verdict-list { display: grid; gap: 4px; } .verdict-list li { display: flex; gap: 10px; align-items: flex-start; padding: 4px 0; } .verdict-list .icon { flex: none; margin-top: 3px; color: var(--ink-2); } .quotes { display: grid; gap: 24px; padding-top: 28px; border-top: 1px solid var(--line); } .quote blockquote p { font-size: 18px; line-height: 1.45; text-wrap: pretty; } .quote blockquote p::before { content: "\201C"; } .quote blockquote p::after { content: "\201D"; } .quote figcaption { margin-top: 8px; font-size: 14px; color: var(--ink-2); } .quote figcaption a { color: var(--ink-2); } .reviews--brief .reviews__score { max-width: 420px; } /* ---------- Water safety: compact, one note */ #swimming { padding-block: 44px; } .safety { display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px; border-radius: var(--radius); background: var(--warn-bg); color: var(--warn-ink); max-width: 640px; } .safety p { font-size: 17px; line-height: 1.5; } .safety__icon { display: inline-flex; flex: none; padding-top: 1px; } .safety__source { margin-top: 6px; font-size: 14px !important; } .safety a { color: var(--warn-ink); text-decoration-color: var(--warn-ink); } /* ---------- Photos */ .section__note { font-size: 15px; color: var(--ink-2); max-width: var(--measure); } .section__title + .section__note { margin-top: 10px; } .section__note + .photo-grid { margin-top: 24px; } .photo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 14px; } .grid-photo--lead { grid-column: 1 / -1; } .grid-photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; background: var(--surface); } .grid-photo figcaption { display: flex; flex-direction: column; gap: 1px; margin-top: 10px; font-size: 13px; line-height: 1.45; color: var(--ink-2); } .grid-photo__credit { overflow-wrap: anywhere; } .grid-photo__date { font-size: 14px; font-weight: 500; color: var(--ink); } .grid-photo__credit a { color: var(--ink-2); text-decoration-color: var(--line); } .section__after { margin-top: 24px; font-size: 15px; } /* ---------- History */ .prose p { max-width: var(--measure); font-size: 17px; } .prose p + p { margin-top: 14px; } @media (min-width: 600px) { .grid-photo--lead { grid-column: auto; } .facility-list:not(.facility-list--quiet):not(.facility-list--short) { display: block; columns: 2; column-gap: 32px; } .getting-there__groups { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 48px; } .reviews__lists { grid-template-columns: 1fr 1fr; } .photo-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 32px 24px; } .grid-photo--span-2 { grid-column: span 2; } .grid-photo--span-3 { grid-column: span 3; } .grid-photo--span-6 { grid-column: span 6; } .quotes--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 1000px) { /* Fold: the gallery is a height-capped band across the grid; the title block and actions sit beneath it at left. */ .fold.fold--band { display: block; max-width: var(--wrap); margin-inline: auto; padding: 24px var(--gutter) 48px; } .fold--band .photo--gallery img { aspect-ratio: auto; height: clamp(280px, 40vh, 440px); } .fold--band .fold__text { max-width: 760px; margin-inline: 0; padding-top: 22px; } .fold--band .fold__text:has(.stats) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); column-gap: 64px; align-items: start; max-width: none; } .fold--band .fold__text:has(.stats) > * { grid-column: 1; } .fold--band .fold__text > .stats { grid-column: 2; grid-row: 1 / span 3; flex-direction: column; gap: 18px; margin: 6px 0 0; padding: 2px 0 2px 32px; border-top: 0; border-left: 1px solid var(--line); } .fold--band .title-block__answer { max-width: 60ch; } /* What's here beside the map, the map in the wider column. */ .home-pair { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; align-items: start; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .home-pair > .section { padding-block: 72px; border-top: 0; } .home-pair > .section > .wrap { max-width: none; padding-inline: 0; } .home-pair .whats-here--split { grid-template-columns: 1fr; gap: 28px; } .home-pair .whats-here__side { padding: 22px 0 0; border-left: 0; border-top: 1px solid var(--line); } .home-pair .facility-list:not(.facility-list--quiet):not(.facility-list--short) { columns: 1; } /* Tier M and L pair with the summary below (What's at is nearly as tall as the map): the map keeps the 560 px the brief allows and What's at takes the rest, so its notes wrap less and the canvas is shorter. */ .home-pair--balance { grid-template-columns: minmax(0, 1fr) 560px; } /* Tier M and L: the short getting-there summary sits under What's at, beside the taller map column. */ .home-pair--three { grid-template-areas: "whats map" "getting map"; grid-template-rows: auto 1fr; } .home-pair--three > #whats-here { grid-area: whats; } .home-pair--three > #map { grid-area: map; } /* No card: the summary is a section like the rest, separated from What's at by a hairline and space. The hairline is a 1px inset shadow because base.css removes top borders from surface sections. */ .home-pair--three > #whats-here { padding-bottom: 56px; } .home-pair--three > #getting-there { grid-area: getting; align-self: start; padding-block: 56px 72px; background: none; box-shadow: inset 0 1px 0 var(--line); } .fold--text-only { grid-template-columns: minmax(0, 760px); } .whats-here--split { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 56px; align-items: start; } .whats-here__side { padding: 4px 0 0 32px; border-top: 0; border-left: 1px solid var(--line); } .reviews:not(.reviews--brief) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); column-gap: 64px; row-gap: 48px; align-items: start; } .reviews .quotes { grid-column: 1 / -1; } .quotes--3 { grid-template-columns: repeat(3, 1fr); gap: 40px; } #swimming { padding-block: 56px; } } /* Map lane: the signature park map (ParkMap) and the getting-there page. Map colours are quiet land tones; the park accent is used only for the boundary and the numbered ways in (docs/brand/identity.md accent allowance). Strokes do not scale with the drawing. */ .pm { --pm-land: #eef1ec; --pm-park: #dcebd1; --pm-trees: #c6dcb6; --pm-water: #cfe4ee; --pm-water-edge: #8dbcd2; --pm-bowls: #c9e2ae; --pm-play: #f1e6c4; --pm-building: #dfe3dc; --pm-building-edge: #c8cfc5; --pm-street-edge: #cdd4ca; container-type: inline-size; } .pm__grid { display: grid; gap: 20px; } /* Stacked, the map keeps to the reading column (design contract: max about 720 px) rather than filling a wide page. */ .pm:not(.pm--side) .pm__grid { max-width: 760px; } .pm__canvas { position: relative; container-type: inline-size; margin-inline: calc(-1 * var(--gutter)); background: var(--pm-land); overflow: hidden; } .pm__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .pm__svg path, .pm__svg rect.pm-land { vector-effect: non-scaling-stroke; } .pm-land { fill: var(--pm-land); } .pm-park { fill: var(--pm-park); } .pm-trees { fill: var(--pm-trees); } .pm-water { fill: var(--pm-water); stroke: var(--pm-water-edge); stroke-width: 1.25; } .pm-bowls { fill: var(--pm-bowls); stroke: #9fbf82; stroke-width: 1; } .pm-play { fill: var(--pm-play); stroke: #cdb877; stroke-width: 1; } .pm-building { fill: var(--pm-building); stroke: var(--pm-building-edge); stroke-width: 1; } .pm-parking { stroke: #b9c0b5; stroke-width: 1; } .pm-hatch-bg { fill: #e6e8e2; } .pm-hatch-line { stroke: #c3c9bf; stroke-width: 2; } .pm-parking-key { stroke: #b9c0b5; stroke-width: 1; } .pm-street-casing, .pm-street { fill: none; stroke-linecap: round; stroke-linejoin: round; } .pm-street-casing--major { stroke: var(--pm-street-edge); stroke-width: 10; } .pm-street-casing--minor { stroke: var(--pm-street-edge); stroke-width: 7.5; } .pm-street--major { stroke: #fff; stroke-width: 8; } .pm-street--minor { stroke: #fff; stroke-width: 5.5; } .pm-path-casing, .pm-path, .pm-steps, .pm-boundary { fill: none; stroke-linecap: round; stroke-linejoin: round; } .pm-path-casing { stroke: #93a88b; stroke-width: 4.5; } .pm-path { stroke: #fff; stroke-width: 2.5; } .pm-steps { stroke: var(--ink-2); stroke-width: 4; stroke-dasharray: 1.5 2; stroke-linecap: butt; } .pm-boundary { stroke: var(--accent); stroke-width: 2.5; } .pm-dot { fill: var(--accent); stroke: #fff; stroke-width: 3; } .pm__overlay { position: absolute; inset: 0; pointer-events: none; } .pm-label, .pm-gate, .pm-stop { position: absolute; transform: translate(-50%, -50%); } .pm-label { transform: translate(-50%, -50%) rotate(var(--pm-rot, 0deg)); white-space: nowrap; line-height: 1.2; color: var(--ink); text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; } .pm-label--feature { font-size: 12px; font-weight: 600; } .pm-label--street { font-size: 11px; font-weight: 500; color: var(--ink-2); letter-spacing: 0.01em; } .pm-gate { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; border: 2px solid #fff; font-size: 12px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 1px 3px rgba(20, 32, 26, 0.35); } .pm-stop { display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 5px; background: var(--ink); color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(20, 32, 26, 0.3); } .pm-north { position: absolute; display: inline-flex; flex-direction: column; align-items: center; gap: 1px; font-size: 11px; font-weight: 600; color: var(--ink); text-shadow: 0 0 2px #fff, 0 0 3px #fff; } .pm-north__arrow { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--ink); } .pm-scale { position: absolute; display: block; } .pm-scale__bar { display: block; height: 6px; border: 2px solid var(--ink); border-top: 0; } .pm-scale__text { display: block; margin-top: 2px; font-size: 11px; font-weight: 500; text-shadow: 0 0 2px #fff, 0 0 3px #fff; } @container (max-width: 559px) { .pm-tier--wide { display: none; } } .pm__aside { font-size: 15px; } .pm__aside > * + * { margin-top: 20px; } .pm-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 14px; color: var(--ink-2); } .pm-legend li { display: flex; align-items: center; gap: 10px; } .pm-swatch { flex: none; width: 28px; height: 14px; overflow: visible; } .pm-swatch path, .pm-swatch rect { vector-effect: non-scaling-stroke; } .pm-gate--key, .pm-stop--key { position: static; transform: none; flex: none; } .pm-gate--key { box-shadow: none; } .pm-stop--key { box-shadow: none; border-color: var(--ink); } .pm__subhead { font-size: 18px; font-weight: 500; } .pm-ways { list-style: none; padding: 0; margin-top: 8px; } .pm-ways li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--line); } .pm-ways li:last-child { border-bottom: 0; } .pm-ways__name { display: block; font-weight: 500; color: var(--ink); } .pm-ways__note { display: block; font-size: 14px; color: var(--ink-2); } .pm-credit { font-size: 13px; color: var(--ink-2); } .pm-credit a { color: var(--ink-2); } .pm-open a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; } .pm-open { margin-top: 8px !important; } .pm--simple .pm__svg { position: static; border-radius: var(--radius); } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .map-actions { margin-top: 24px; } @media (min-width: 600px) { .pm__canvas { margin-inline: 0; border-radius: var(--radius); border: 1px solid var(--line); } } /* The figure adapts to its own width, not the viewport: beside the map only in a wide column. */ /* Names-only list (home map on tier M and L parks): short numbered rows, detail on /getting-there. */ .pm-names { list-style: none; padding: 0; margin-top: 8px; } .pm-names li { display: flex; gap: 12px; align-items: center; padding: 7px 0; font-weight: 500; break-inside: avoid; } @container (min-width: 560px) { .pm-names--cols { columns: 2; column-gap: 40px; } .pm-legend { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); } .pm-ways--cols { columns: 2; column-gap: 40px; } .pm-ways--cols li { break-inside: avoid; } } @container (min-width: 900px) { .pm--side .pm__grid { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 40px; align-items: start; } .pm--side .pm-legend { grid-template-columns: 1fr 1fr; } } /* Getting-there page */ .gt-map { padding-bottom: 8px; } .gt-map .pm { margin-top: 28px; } .gt-list { list-style: none; padding: 0; max-width: var(--measure); } .gt-list > li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); } .gt-list > li:last-child { border-bottom: 0; } .gt-list .icon { margin-top: 3px; color: var(--ink-2); } .gt-list__name { display: block; font-weight: 500; } .gt-list__link { display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px -6px; font-weight: 500; } .gt-list__note { display: block; font-size: 14px; color: var(--ink-2); } .gt-entrances { list-style: none; padding: 0; display: grid; gap: 0; } .gt-entrances > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--line); } .gt-entrances > li:last-child { border-bottom: 0; } .gt-entrances .pm-gate { position: static; transform: none; box-shadow: none; margin-top: 1px; } .gt-entrances__name { font-weight: 500; font-size: 17px; } .gt-entrances__note { font-size: 15px; color: var(--ink-2); margin-top: 2px; } .gate-links { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 8px; font-size: 15px; } .gate-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; } .gt-note { margin-top: 16px; font-size: 15px; color: var(--ink-2); max-width: var(--measure); } .gt-section-body > * + * { margin-top: 16px; } @media (min-width: 1000px) { .gt-entrances { grid-template-columns: 1fr 1fr; column-gap: 40px; } .gt-entrances > li:nth-last-child(2):nth-child(odd) { border-bottom: 0; } } /* Neighbouring places (context only, outside the park boundary) */ .pm-neighbour { stroke: none; } .pm-neighbour--wood { fill: #d7e3cf; } .pm-neighbour--golf { fill: #e6ece0; } .pm-label--place { font-weight: 500; font-style: italic; color: var(--ink-2); } .gt-dest { margin-top: 10px; font-size: 15px; font-weight: 500; } /* Copy lane: styles for the About, Privacy, Credits and 404 pages. The head carries the page's one action, so it stays compact enough to sit inside a 390x844 screen. */ .page-head--utility { padding-bottom: 40px; } .page-head--utility .actions { margin-top: 24px; } .page-head__more { margin-top: 14px; font-size: 15px; } .page-head--utility + .section { border-top: 1px solid var(--line); } /* Sources on About: one line each, the licence quiet beside the title. */ .source-list { margin-top: 20px; max-width: var(--measure); } .source-list li { padding: 10px 0; border-top: 1px solid var(--line); } .source-list li:last-child { border-bottom: 1px solid var(--line); } .source-list__licence { display: block; margin-top: 2px; font-size: 14px; color: var(--ink-2); } /* Credits: what the credit is for, then who and under which licence, set a step down. */ .credit-list { max-width: var(--measure); } .credit-list li { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--line); } .credit-list li:last-child { border-bottom: 1px solid var(--line); } .credit-list__what { font-weight: 500; } .credit-list__who { font-size: 15px; color: var(--ink-2); } .credit-list__who a { color: var(--ink-2); } .credit-note { margin-top: 16px; max-width: var(--measure); font-size: 14px; color: var(--ink-2); } .prose + .credit-list { margin-top: 16px; } @media (min-width: 1000px) { .page-head--utility { padding-bottom: 56px; } .source-list li { display: flex; gap: 16px; align-items: baseline; justify-content: space-between; } .source-list__licence { margin-top: 0; white-space: nowrap; } .credit-list li { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: baseline; } .credit-list__who { text-align: left; } }