/* SKF Station Finder + Grid */ /* Station pages: shared tokens */ .skf-finder, .skf-grid, .skf-detail { --skf-link: #0a3d7a; --skf-yellow: #f2c230; --skf-red: #e0262f; --skf-flag: #3b82f6; /* highlighted (blue) stations: pin fill and number outline */ --skf-flag-text: #7fb0ff; /* the selected row's number, readable on the dark panel */ --skf-red-text: #ff5a61; /* lighter red for text on the dark panel (about 5:1 on the active row) */ --skf-dark: #1b1d1f; --skf-muted: #9a9a9a; box-sizing: border-box; } .skf-finder *, .skf-grid *, .skf-detail * { box-sizing: border-box; } .skf-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; word-wrap: normal !important; } /* ---------- Finder ---------- */ .skf-finder { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px; padding: 40px; background: var(--skf-dark); color: #fff; } .skf-eyebrow { margin: 0 0 12px; color: var(--skf-yellow); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .skf-finder__title { margin: 0 0 10px; color: #fff; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; letter-spacing: .02em; } .skf-finder .skf-finder__emergency { margin: -8px 0 20px; font-size: 14px; font-weight: 700; line-height: 1.4; } .skf-finder__intro { margin: 0 0 20px; color: #fff; font-size: 15px; line-height: 1.4; } .skf-finder .skf-finder__form { display: flex; align-items: stretch; flex-wrap: nowrap; width: 100%; margin: 0; padding: 0; } /* The [type] attribute selectors add specificity on purpose: Uncode has rules like ".style-light .style-dark button[type]" that tie with ours and win whenever their stylesheet loads after this one (which it does now that this stylesheet loads in ). */ .skf-finder .skf-finder__form input.skf-finder__input[type="text"] { flex: 1 1 auto; width: auto; min-width: 0; height: 46px; min-height: 0; margin: 0; padding: 0 14px; border: 1px solid transparent; border-radius: 3px 0 0 3px; box-shadow: none; -webkit-appearance: none; appearance: none; background: #5b5b5b; color: #fff; font: inherit; font-size: 13px; line-height: 46px; letter-spacing: .06em; text-transform: uppercase; } .skf-finder .skf-finder__form input.skf-finder__input[type="text"]::placeholder { color: #fff; opacity: .9; } .skf-finder .skf-finder__form button.skf-btn[type="submit"] { flex: 0 0 auto; width: auto; height: auto; min-height: 46px; margin: 0; padding: 0 22px; /* stretches to match Google's taller field */ border: 1px solid transparent; border-radius: 0 3px 3px 0; box-shadow: none; cursor: pointer; -webkit-appearance: none; appearance: none; background: var(--skf-yellow); color: var(--skf-dark); font: inherit; font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; } .skf-finder .skf-finder__form button.skf-btn[type="submit"]:hover, .skf-finder .skf-finder__form button.skf-btn[type="submit"]:focus { background: var(--skf-yellow); color: var(--skf-dark); filter: brightness(1.08); } .skf-finder .skf-finder__form gmp-place-autocomplete { flex: 1 1 auto; min-width: 0; margin: 0; color-scheme: light; /* a standard white field; it's Google's component */ border-radius: 3px 0 0 3px; /* no overflow: hidden here, it would clip the suggestions dropdown */ } .skf-finder__input:focus-visible, .skf-btn:focus-visible, .skf-finder__geo:focus-visible, .skf-row:focus-visible { outline: 2px solid var(--skf-yellow); outline-offset: 2px; } .skf-finder__status { min-height: 1.4em; margin: 10px 0 0; color: #ddd; font-size: 13px; } .skf-finder__geo { display: inline-block; min-height: 24px; margin: 0 0 12px; padding: 4px 0; border: 0; background: none; cursor: pointer; color: var(--skf-yellow); font-size: 13px; text-decoration: underline; } .skf-finder__list { position: relative; margin: 0; padding: 0; list-style: none; min-height: 240px; /* room for three rows so the panel doesn't jump between pages */ } .skf-finder__list li { margin: 0; padding: 0; } .skf-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; column-gap: 10px; padding: 14px 8px; color: #fff; text-decoration: none; border-left: 3px solid transparent; } .skf-row:hover, .skf-row.is-active { background: rgba(255, 255, 255, .06); } .skf-row.is-active { border-left-color: var(--skf-yellow); } /* Beat theme link/heading colors (e.g. .entry-content a, a:visited, a:hover) */ .skf-finder .skf-row, .skf-finder .skf-row:visited, .skf-finder .skf-row:hover, .skf-finder .skf-row:focus { color: #fff; text-decoration: none; } .skf-finder .skf-row__name, .skf-finder .skf-row__dist { color: #fff; } .skf-finder .skf-row__addr { color: var(--skf-muted); } .skf-finder .skf-row .skf-row__num { color: #fff; } .skf-finder .skf-row.is-active .skf-row__num { color: var(--skf-red-text); } .skf-finder .skf-finder__title, .skf-finder .skf-finder__intro, .skf-finder .skf-finder__emergency { color: #fff; } .skf-finder .skf-eyebrow { color: var(--skf-yellow); } .skf-row__num { font-size: 30px; font-weight: 600; letter-spacing: .04em; line-height: 1; border: 1px solid var(--skf-red); height: 100%; display: flex; justify-content: center; align-items: center; } .skf-row.is-active .skf-row__num { color: var(--skf-red-text); } .skf-row__num--icon svg { display: block; width: 28px; height: 28px; } .skf-row__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .skf-row__name { font-size: 18px; font-weight: 600; letter-spacing: .03em; } .skf-row__addr { color: var(--skf-muted); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .skf-row__dist { align-self: end; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .skf-finder__map { width: 100%; border-radius: 6px; overflow: hidden; background: #cfd8dc; align-self: stretch; height: auto; min-height: var(--skf-height, 460px); /* fills the full height of the panel */ } .skf-finder__panel, .skf-finder__map { min-width: 0; } .skf-finder__map[hidden], .skf-finder__form[hidden], .skf-finder__geo[hidden] { display: none; } .skf-finder--nomap { grid-template-columns: minmax(0, 1fr); } /* Pager */ .skf-finder .skf-finder__pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 0; } .skf-finder .skf-finder__pager[hidden] { display: none; } .skf-finder .skf-finder__pager button.skf-pager__btn { margin: 0; padding: 8px 16px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 3px; box-shadow: none; cursor: pointer; background: transparent; color: #fff; font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; -webkit-appearance: none; appearance: none; } .skf-finder .skf-finder__pager button.skf-pager__btn:hover:not([aria-disabled="true"]), .skf-finder .skf-finder__pager button.skf-pager__btn:focus-visible { background: var(--skf-yellow); border-color: var(--skf-yellow); color: var(--skf-dark); } .skf-finder .skf-finder__pager button.skf-pager__btn[aria-disabled="true"] { opacity: .4; cursor: default; } .skf-finder .skf-finder__pager button.skf-pager__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .skf-finder .skf-pager__count { color: #fff; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } /* Highlighted stations (shortcode: highlight="ID,ID") */ .skf-finder .skf-row--flag .skf-row__num { border-color: var(--skf-flag); } .skf-finder .skf-row--flag.is-active .skf-row__num { color: var(--skf-flag-text); } .skf-finder .skf-finder__legend { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; color: #fff; font-size: 13px; line-height: 1.4; } .skf-finder__swatch { flex: 0 0 auto; width: 16px; height: 16px; border: 1px solid var(--skf-flag); } /* Map pins (AdvancedMarkerElement content) */ .skf-pin { transform-origin: 50% 100%; transition: transform .15s ease; cursor: pointer; } .skf-pin svg { display: block; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .45)); } .skf-pin path { fill: var(--skf-red); stroke: var(--skf-dark); stroke-width: 1.5; } .skf-pin circle { fill: #fff; } .skf-pin.is-active { transform: scale(1.3); } .skf-pin.is-active path { fill: var(--skf-yellow); } .skf-pin.is-active circle { fill: var(--skf-dark); } .skf-pin.skf-pin--flag:not(.is-active) path { fill: var(--skf-flag); } .skf-you { width: 16px; height: 16px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 0 0 2px rgba(26, 115, 232, .35); } @media (max-width: 480px) { .skf-finder .skf-finder__form button.skf-btn[type="submit"] { padding: 0 16px; } } @media (max-width: 900px) { .skf-finder { grid-template-columns: minmax(0, 1fr); padding: 24px 18px; gap: 24px; } /* minmax(0, ...) lets the column shrink below the form's minimum width */ .skf-finder__map { height: 360px; min-height: 360px; } .skf-row { grid-template-columns: 52px minmax(0, 1fr) auto; } } /* ---------- Grid ---------- */ .skf-grid { display: grid; gap: 28px 24px; grid-template-columns: repeat(3, minmax(0, 1fr)); } .skf-grid--cols-1 { grid-template-columns: 1fr; } .skf-grid--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .skf-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .skf-card { position: relative; display: block; } .skf-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 8px; background: #e5e5e5; } .skf-card__img, .skf-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .skf-card:hover .skf-card__img { transform: scale(1.03); } .skf-card__placeholder { display: block; width: 100%; height: 100%; background: linear-gradient(135deg, #d9d9d9, #efefef); } /* The title link stretches over the whole card (so the photo and address are clickable), while Get Directions sits above it as its own link: no nested links. */ .skf-grid .skf-card__link, .skf-grid .skf-card__link:hover, .skf-grid .skf-card__link:focus { color: inherit; text-decoration: none; } .skf-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 8px; } .skf-card__link:focus-visible { outline: none; } .skf-card__link:focus-visible::after { outline: 2px solid var(--skf-link); outline-offset: 4px; } .skf-card__title { display: block; margin-top: 12px; font-size: 20px; font-weight: 600; letter-spacing: .02em; line-height: 1.2; } .skf-card__sub { font-size: .8em; font-weight: 500; } .skf-card__address { display: block; margin-top: 6px; color: #444; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; } .skf-card__actions { position: relative; z-index: 2; display: block; margin-top: 6px; } /* "Get Directions" link (grid + detail block) */ .skf-grid .skf-directions, .skf-detail .skf-directions { display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 4px 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .skf-grid .skf-directions { color: var(--skf-link); text-decoration: underline; text-underline-offset: 3px; } .skf-grid .skf-directions:hover, .skf-grid .skf-directions:focus { color: #b3121b; text-decoration: underline; } .skf-grid .skf-directions:focus-visible { outline: 2px solid var(--skf-link); outline-offset: 2px; } .skf-directions__icon { flex: 0 0 auto; } /* ---------- Station detail block: [skf_station_info] ---------- Links inherit the surrounding text color, so the block works on light and dark sections. The markup avoids

and