/*! * SBCOG + San Benito County Express — the corridor. * * The one non-obvious decision this file embodies: both agencies live in ONE * stylesheet, and the County Express identity is a token override on * (.site-transit), never a parallel sheet. Every shared selector reads * --dept-*, so switching identity is one class change — which is exactly how * the WordPress multisite network this build proposes will carry two sites off * one theme without duplicating a single rule. */ /* ---------------------------------------------------------------- fonts -- */ @font-face { font-family: "Zodiak"; src: url("fonts/zodiak-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Zodiak"; src: url("fonts/zodiak-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Be Vietnam Pro"; src: url("fonts/be-vietnam-pro-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Geist Mono"; src: url("fonts/geist-mono-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } /* --------------------------------------------------------------- tokens -- */ :root { /* Benitoite ramp: one OKLCH hue (269.19deg) stepped in lightness with chroma gamut-fit down into sRGB, so the light room and the dark corridor band come from the same seed instead of a second hand-picked accent. */ --accent-50: #f2f6ff; --accent-100: #e2eaff; --accent-200: #c7d6ff; --accent-300: #a3bbff; --accent-400: #7d9cff; --accent-500: #5d7ced; --accent-600: #435fd4; --accent-700: #2b3fb8; --accent-800: #1b2597; --accent-900: #0e0275; --paper: #f6f2e8; /* caliche */ --paper-warm: #efe8d8; --ink: #171512; /* basalt */ --ink-soft: #4a443c; --hill: #c9a227; /* dry grass, and the highway centerline */ --hill-deep: #856910; /* one step darker than the hill so 13px mono labels clear 4.5:1 on caliche */ --chaparral: #2f5d4a; --chaparral-deep: #1d3a2e; --rule: #d8cfba; /* Status owns its own token so the heritage gold above can never end up carrying a service alert by accident. */ --alert: #a02c12; --alert-bg: #fbeae5; /* Identity tokens. Overridden wholesale by .site-transit below. */ --dept: var(--accent-700); --dept-deep: var(--accent-900); --dept-tint: var(--accent-50); --dept-on: #ffffff; --ff-display: "Zodiak", "Iowan Old Style", Georgia, serif; --ff-body: "Be Vietnam Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --ff-meta: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace; /* One continuous curve between a 360px and a 1280px anchor: tighter ratio small (calmer on a phone), bolder large. No breakpoint stairsteps. */ --fs-xs: clamp(0.8125rem, 0.79rem + 0.10vw, 0.875rem); --fs-sm: clamp(0.875rem, 0.845rem + 0.13vw, 0.9375rem); --fs-base: clamp(1rem, 0.955rem + 0.20vw, 1.125rem); --fs-md: clamp(1.125rem, 1.05rem + 0.33vw, 1.3125rem); --fs-lg: clamp(1.35rem, 1.20rem + 0.65vw, 1.75rem); --fs-xl: clamp(1.65rem, 1.36rem + 1.28vw, 2.5rem); --fs-2xl: clamp(2.05rem, 1.55rem + 2.20vw, 3.5rem); --fs-3xl: clamp(2.5rem, 1.66rem + 3.70vw, 4.75rem); /* The hero display step: Zodiak at the size the corridor photo can carry. */ --fs-hero: clamp(2.9rem, 1.9rem + 4.4vw, 5.9rem); --measure: 66ch; --gutter: clamp(1.125rem, 0.7rem + 1.9vw, 2.5rem); --shell: 76rem; --radius: 3px; /* The stringline: one 3px basalt rail carrying 15px benitoite stop nodes, terminal-labeled like the transit map it is drawn from. */ --line: 3px; --node: 15px; } /* County Express: the chaparral register. Only tokens change. */ .site-transit { --dept: var(--chaparral); --dept-deep: var(--chaparral-deep); --dept-tint: #e8f0ea; --dept-on: #ffffff; } /* ------------------------------------------------------------- base bones -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--ff-body); font-size: var(--fs-base); line-height: 1.6; font-optical-sizing: auto; } h1, h2, h3, h4 { font-family: var(--ff-display); font-weight: 700; line-height: 1.08; letter-spacing: -0.014em; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); line-height: 1.12; } h3 { font-size: var(--fs-lg); line-height: 1.16; } h4 { font-size: var(--fs-md); line-height: 1.25; } p, li { max-width: var(--measure); } p { margin: 0 0 1.1em; } a { color: var(--accent-700); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { text-decoration-thickness: 2px; } /* A 2px solid ring at 3px offset, held on both the light room and the dark corridor band — checked on every surface it lands on, not only on white. */ :focus-visible { outline: 2px solid var(--accent-700); outline-offset: 3px; border-radius: 2px; } .room-corridor :focus-visible, .room-deep :focus-visible { outline-color: var(--accent-300); } img { max-width: 100%; height: auto; display: block; } .shell { width: min(100% - (var(--gutter) * 2), var(--shell)); margin-inline: auto; } .meta { font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; } /* Source-citation links are bare URLs in a monospaced, letter-spaced face, so they have no break opportunity at all: "sanbenitocountyexpress.org/fares.html" measured 308px and pushed both fares pages 14px past a 320px viewport. The URL is deliberately shown in full rather than hidden behind link text — a reader checking a transcribed fare should see exactly which page it came from — so the fix is to let it break rather than to shorten it. */ .meta a { overflow-wrap: anywhere; } .eyebrow { font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 0.9rem; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--accent-900); color: #fff; padding: 0.75rem 1.25rem; z-index: 100; } .skip-link:focus { left: 0; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap; } /* ------------------------------------------------------------ the motif -- */ /* * `corridor`: one road with stops on it. A rule carrying nodes, lifted from * the Tripper timetable's lettered timepoints A-H and the Hollister-to-Gilroy * line. It divides registers, marks lists, rails the departure board, fills * the empty state, and on the 404 it runs off the edge with no node left. */ .corridor-rule { position: relative; height: 2px; background: var(--rule); border: 0; margin: clamp(2.5rem, 5vw, 4rem) 0; } .corridor-rule::before, .corridor-rule::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; transform: translateY(-50%) rotate(45deg); background: var(--dept); } /* Rooms already carry their own vertical breathing space. When the route line sits directly between two rooms, its general-purpose margin would be added on top of both paddings and turn a divider into a dead zone. */ section.room + hr.corridor-rule { margin-block: 0; } .corridor-rule::before { left: 0; } .corridor-rule::after { right: 0; } .room-corridor .corridor-rule { background: rgba(255, 255, 255, 0.22); } .room-corridor .corridor-rule::before, .room-corridor .corridor-rule::after { background: var(--hill); } /* The corridor list — the motif as a list marker: one 3px basalt rail with benitoite stop nodes. Used plain for service and step lists; the --stringline modifier on the homepage turns it into the full transit-map spine with terminal caps and the gold work-zone node. */ .corridor-list { list-style: none; padding: 0; margin: 0; position: relative; border-left: var(--line) solid var(--ink); } .corridor-list > li { position: relative; padding: 0 0 clamp(1.35rem, 3vw, 2rem) clamp(1.5rem, 3.5vw, 2.25rem); max-width: var(--measure); } .corridor-list > li::before { content: ""; position: absolute; left: calc(-6.5px - 1.5px); top: 0.5em; width: 13px; height: 13px; transform: rotate(45deg); background: var(--paper); border: 2px solid var(--dept); } .corridor-list > li:last-child { padding-bottom: 0; } .corridor-list--stringline > li { padding-bottom: clamp(1.75rem, 4vw, 3rem); padding-left: clamp(1.75rem, 4vw, 2.75rem); } /* Nodes sit on the h3 cap-height, not the top of the whole stop block. */ .corridor-list--stringline > li::before { display: none; } .corridor-list--stringline h3 { position: relative; font-size: var(--fs-xl); letter-spacing: -0.018em; margin-bottom: 0.15em; line-height: 1.15; } .corridor-list--stringline h3::before { content: ""; position: absolute; left: calc(-1 * clamp(1.75rem, 4vw, 2.75rem) - (var(--node) / 2) - (var(--line) / 2)); top: calc((1em * 1.15 - var(--node)) / 2); width: var(--node); height: var(--node); transform: rotate(45deg); background: var(--dept); border: 2px solid var(--paper); box-shadow: 0 0 0 2px var(--dept); box-sizing: border-box; } .corridor-list--stringline > li.corridor-stop--work h3::before { background: var(--hill); box-shadow: 0 0 0 2px var(--hill); } .corridor-list--stringline .meta { color: var(--hill-deep); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.55rem; max-width: none; } .corridor-list--stringline p { font-size: var(--fs-sm); } .corridor-list--stringline p:last-child { margin-bottom: 0; } .corridor-list--stringline a { font-weight: 600; } /* The terminal caps: HOLLISTER at the top, GILROY at the bottom, set in mono with the node dead on the rail so the line reads as a route even before a stop does. The cap shares the list's left edge, so 1.5px is rail center. */ .corridor-terminals { display: flex; align-items: center; gap: 0.9rem; margin: 0 0 1.4rem; position: relative; padding-left: clamp(1.75rem, 4vw, 2.75rem); font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink); } .corridor-terminals i { position: absolute; left: calc(1.5px - 5.5px); top: 50%; margin-top: -5.5px; width: 11px; height: 11px; transform: rotate(45deg); background: var(--ink); } .corridor-terminals--end { margin: 1.4rem 0 0; } .home-corridor-map { margin-block: 1.75rem 2.5rem; } .home-corridor-map img { display: block; width: 100%; height: auto; border: 2px solid var(--ink); background: #fff; } .home-corridor-map .figure-note { border: 2px solid var(--ink); border-top: 0; background: var(--paper-warm); padding: 0.6rem 0.9rem; margin-top: 0; } .corridor-empty { border: 2px dashed var(--rule); padding: clamp(1.5rem, 4vw, 2.5rem); text-align: left; } .corridor-empty::before { content: ""; display: block; height: 2px; background: repeating-linear-gradient(90deg, var(--rule) 0 26px, transparent 26px 38px); margin-bottom: 1.25rem; } /* --------------------------------------------------------------- rooms -- */ .room { padding-block: clamp(2.75rem, 5.25vw, 4.5rem); } .room-paper { background: var(--paper); } .room-warm { background: var(--paper-warm); } .room-corridor { background: var(--accent-900); color: var(--accent-100); } .room-corridor h2, .room-corridor h3 { color: #fff; } .room-corridor a { color: var(--accent-300); } .room-deep { background: var(--chaparral-deep); color: #e7efe9; } .room-deep h2, .room-deep h3 { color: #fff; } .room-deep a { color: #a8d7c1; } /* The muted label colours above are tuned against caliche paper. Dropped onto a dark band they fall to 1.7:1 and 3.1:1, so every register that changes the background restates them. Checked on the surface each one actually lands on, which is the whole point of the rule. */ .room-corridor .eyebrow, .room-corridor .segment__milepost, .room-deep .eyebrow, .room-deep .segment__milepost { color: var(--hill); } .room-corridor .meta, .room-deep .meta { color: var(--accent-100); } .room-deep .meta { color: #cfe0d5; } .room-corridor .segment, .room-deep .segment { border-bottom-color: rgba(255, 255, 255, 0.22); } /* The block above re-points .eyebrow, .segment__milepost and .meta for the dark registers but stops there. Four more muted classes hard-code --ink-soft (#4a443c) and were landing in those same rooms unread: measured per text node against the real painted background, .record-row__date and .record-row__meta sat at 1.29:1 on the alerts pages and 1.7:1 on /measure-g/, .figure-note at 1.7:1 on /projects/highway-25/ and /ride/next-bus/, and .plate p at 1.29:1 on /es/. 38 failures across 6 routes. --paper-dim is caliche pulled down just far enough to still read as secondary against both dark grounds while clearing 4.5:1 on each. */ :root { --paper-dim: #c9c2b2; } .room-corridor .figure-note, .room-corridor .record-row__date, .room-corridor .record-row__meta, .room-corridor .plate p, .room-corridor figcaption, .room-deep .figure-note, .room-deep .record-row__date, .room-deep .record-row__meta, .room-deep .plate p, .room-deep figcaption { color: var(--paper-dim); } /* ...but never inside a light card sitting in one of those rooms, where the dimmed caliche would be the failure instead. */ .room-corridor .board .figure-note, .room-corridor .board .meta, .room-corridor .timetable-wrap .figure-note, .room-deep .board .figure-note, .room-deep .board .meta, .room-deep .timetable-wrap .figure-note { color: var(--ink-soft); } /* ---------------------------------------------------------- proto banner -- */ .proto-banner { background: var(--ink); color: var(--paper); font-size: var(--fs-xs); padding: 0.55rem 0; text-align: center; letter-spacing: 0.01em; } .proto-banner strong { color: var(--hill); font-weight: 600; } /* ---------------------------------------------------------- site header -- */ .site-header { position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 2px solid var(--ink); container-type: scroll-state; } .site-header__bar, .header-bar { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); padding-block: 0.9rem; flex-wrap: wrap; } .brand { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--ink); flex: 0 0 auto; } .brand__mark { font-family: var(--ff-display); font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.02em; color: var(--dept); line-height: 1; display: inline-flex; align-items: center; gap: 0.5em; } /* The benitoite stop node: optical center on the SBCOG cap-height, not the baseline of the three-line agency name beside it. */ .brand__mark::before { content: ""; width: 0.48em; height: 0.48em; transform: rotate(45deg); background: var(--dept); flex: 0 0 auto; margin-top: 0.02em; } .brand__tagline { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: 500; color: var(--ink-soft); letter-spacing: 0.01em; max-width: 18ch; line-height: 1.3; } /* On a phone the full agency name wraps to three lines and pushes the hero off the first screen; the SBCOG lockup already identifies the site there. */ @media (max-width: 40rem) { .brand__tagline { display: none; } } /* Chromium-only progressive enhancement: the compositor tracks "stuck", so the affordance costs no scroll listener and still works with JS off. Anywhere unsupported the header just stays full size, which is the current baseline. */ @container scroll-state(stuck: top) { .site-header__bar { padding-block: 0.55rem; } .brand__tagline { opacity: 0; } } @media (prefers-reduced-motion: no-preference) { .site-header__bar { transition: padding-block 160ms ease; } .brand__tagline { transition: opacity 160ms ease; } } /* ------------------------------------------------------------- omnibox -- */ .omnibox { flex: 1 1 20rem; min-width: 0; position: relative; display: flex; gap: 0; } .omnibox__input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: var(--fs-sm); padding: 0.68rem 0.85rem; border: 2px solid var(--ink); border-right: 0; background: #fff; color: var(--ink); border-radius: var(--radius) 0 0 var(--radius); } .omnibox__input::placeholder { color: #6d665c; } .omnibox__submit { flex: 0 0 auto; font: inherit; font-weight: 600; font-size: var(--fs-sm); min-height: 44px; padding-inline: 1.05rem; border: 2px solid var(--ink); background: var(--dept); color: var(--dept-on); cursor: pointer; border-radius: 0 var(--radius) var(--radius) 0; } .omnibox__submit:hover { background: var(--accent-800); } .site-transit .omnibox__submit:hover { background: var(--chaparral-deep); } .omnibox__listbox { position: absolute; top: calc(100% + 4px); left: 0; right: 0; background: #fff; border: 2px solid var(--ink); max-height: 24rem; overflow-y: auto; z-index: 60; margin: 0; padding: 0; list-style: none; box-shadow: 0 14px 30px rgba(23, 21, 18, 0.16); } .omnibox__listbox[hidden] { display: none; } .omnibox__group { font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.11em; text-transform: uppercase; color: var(--ink-soft); padding: 0.6rem 0.85rem 0.2rem; border-top: 1px solid var(--rule); } .omnibox__group:first-child { border-top: 0; } .omnibox__option { padding: 0.6rem 0.85rem; cursor: pointer; min-height: 44px; display: flex; flex-direction: column; justify-content: center; } .omnibox__option[aria-selected="true"], .omnibox__option:hover { background: var(--accent-50); } .omnibox__option-title { font-weight: 600; font-size: var(--fs-sm); } .omnibox__option-note { font-family: var(--ff-meta); font-size: var(--fs-xs); color: var(--ink-soft); } .omnibox__option--ask { background: var(--accent-50); } .omnibox__option--ask .omnibox__option-title { color: var(--accent-800); } /* ------------------------------------------------------------------ nav -- */ .site-nav { border-top: 1px solid var(--rule); } .site-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0; } .site-nav__list a { display: block; padding: 0.72rem 0.95rem; min-height: 44px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: var(--fs-sm); border-bottom: 3px solid transparent; } .site-nav__list a:hover { border-bottom-color: var(--hill); } /* The current page is a stop on the line: the node marker from the brand and the stringline, never a generic underline. */ .site-nav__list a[aria-current="page"] { position: relative; border-bottom-color: var(--dept); font-weight: 700; } .site-nav__list a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: var(--dept); } .nav-disclosure { border-top: 1px solid var(--rule); } .nav-disclosure > summary { list-style: none; cursor: pointer; padding: 0.75rem 0; min-height: 44px; display: flex; align-items: center; gap: 0.5rem; font-weight: 600; font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.11em; text-transform: uppercase; } .nav-disclosure > summary::-webkit-details-marker { display: none; } .nav-disclosure > summary::before { content: ""; width: 18px; height: 2px; background: var(--ink); box-shadow: 0 5px 0 var(--ink), 0 -5px 0 var(--ink); } @media (min-width: 62rem) { .nav-disclosure > summary { display: none; } .nav-disclosure[open] .site-nav, .nav-disclosure .site-nav { display: block; } /* A closed

keeps its content out of the accessibility tree even when a descendant is forced back to display:block, so at desktop the nav rendered visually while screen readers saw no navigation landmark at all. Reopening the details content is the only fix that restores both. */ .nav-disclosure::details-content { content-visibility: visible; block-size: auto; } } @media (max-width: 61.99rem) { .nav-disclosure:not([open]) .site-nav { display: none; } .site-nav__list { flex-direction: column; } .site-nav__list a { border-bottom: 1px solid var(--rule); } } /* ---------------------------------------------------------------- hero -- */ /* * Type over photography never sits on raw pixels: the scrim below converges to * a text-safe field under the copy and lets the photograph read where there is * none. Both overlaid pairs are checked against the busiest region they cross. */ .hero { position: relative; isolation: isolate; background: var(--accent-900); color: #fff; overflow: hidden; } .hero__media { position: absolute; inset: 0; z-index: -2; } .hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( 100deg, rgba(14, 2, 117, 0.94) 0%, rgba(14, 2, 117, 0.86) 34%, rgba(14, 2, 117, 0.52) 62%, rgba(14, 2, 117, 0.24) 100% ); } .hero__inner { padding-block: clamp(3.5rem, 9vw, 7.5rem); display: grid; gap: clamp(1.25rem, 3vw, 2rem); max-width: 42rem; } .hero h1 { font-size: var(--fs-hero); line-height: 1.1; letter-spacing: -0.02em; color: #fff; margin-bottom: 0.3em; max-width: 12ch; } /* At compact-wide widths the unclamped display step crowds the viewport share the rhythm contract allows; the corridor photo still carries the scale. */ @media (max-width: 70rem) { .hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); max-width: 16ch; } } .hero__lede { font-size: var(--fs-md); color: var(--accent-100); max-width: 36ch; margin-bottom: 0; } .hero .eyebrow { color: var(--hill); } /* The route strip: the corridor in one mono line, terminal to terminal, so the first viewport already proves the place. Terminals are the stops riders actually change at, not an invented schematic. */ .hero__route { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; margin: 1.1rem 0 0; font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent-100); } .hero__route i { width: 7px; height: 7px; transform: rotate(45deg); background: var(--hill); flex: 0 0 auto; } .hero__route s { flex: 0 1 1.5rem; min-width: 1rem; max-width: 2.5rem; height: 2px; align-self: center; background: rgba(255, 255, 255, 0.45); text-decoration: none; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; align-items: center; margin-top: 1.35rem; } .hero__actions .btn { white-space: nowrap; } /* On narrow screens the county-road photograph becomes its own complete landscape frame above the copy. Forcing a 1.61:1 source through the tall mobile hero discarded most of the corridor the image is meant to prove. */ @media (max-width: 42rem) { .hero__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 1643 / 1018; } .hero__media img { object-fit: contain; object-position: center; } .hero::after { display: none; } .hero__inner { padding-block: clamp(2.25rem, 9vw, 3.5rem); } } /* ------------------------------------------------- departure strip/board -- */ /* The strip is the transit map's next train line pulled into chrome: basalt band, gold label, tabular mono times, and the corridor rail closing it. */ .departure-strip { background: var(--ink); color: var(--paper); padding-block: 1.05rem; position: relative; } .departure-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--hill); } .departure-strip__inner { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.6rem 1.6rem; } .departure-strip__label { font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.13em; text-transform: uppercase; color: var(--hill); display: inline-flex; align-items: center; gap: 0.5rem; } .departure-strip__label::before { content: ""; width: 9px; height: 9px; transform: rotate(45deg); background: var(--hill); } .departure-strip .meta { font-size: var(--fs-sm); letter-spacing: 0.02em; color: var(--paper); } .departure-strip a { color: var(--accent-300); } .board { border: 2px solid var(--ink); background: #fff; } .board__head { background: var(--dept); color: var(--dept-on); padding: 0.9rem 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem 1.2rem; align-items: baseline; justify-content: space-between; } .board__head h2, .board__head h3 { color: inherit; margin: 0; font-size: var(--fs-md); } .board__list { list-style: none; margin: 0; padding: 0; } .board__row { display: grid; grid-template-columns: minmax(5.5rem, auto) 1fr; gap: 0.25rem 1.1rem; padding: 0.85rem 1.1rem; border-top: 1px solid var(--rule); align-items: baseline; } .board__row:first-child { border-top: 0; } .board__time { font-family: var(--ff-meta); font-variant-numeric: tabular-nums; font-size: var(--fs-lg); font-weight: 600; letter-spacing: -0.02em; color: var(--accent-800); } .site-transit .board__time { color: var(--chaparral-deep); } .board__where { font-weight: 600; } .board__connect { grid-column: 2; font-size: var(--fs-sm); color: var(--ink-soft); max-width: 46ch; } .board__rail { height: 3px; background: var(--rule); position: relative; margin: 0; } .board__rail span { position: absolute; inset: 0 auto 0 0; background: var(--dept); } /* -------------------------------------------------------------- tables -- */ .timetable-wrap { overflow-x: auto; border: 2px solid var(--ink); background: #fff; } table.timetable { border-collapse: collapse; width: 100%; font-family: var(--ff-meta); font-variant-numeric: tabular-nums; font-size: var(--fs-sm); } table.timetable caption { caption-side: top; text-align: left; padding: 0.85rem 1rem; font-family: var(--ff-body); font-weight: 600; background: var(--paper-warm); border-bottom: 2px solid var(--ink); } table.timetable th, table.timetable td { padding: 0.5rem 0.7rem; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; } table.timetable thead th { background: var(--dept-tint); font-family: var(--ff-body); font-size: var(--fs-xs); letter-spacing: 0.02em; border-bottom: 2px solid var(--ink); position: sticky; top: 0; } table.timetable tbody tr:nth-child(even) { background: #faf8f2; } table.timetable td[data-nostop] { color: #7a736a; } table.data { border-collapse: collapse; width: 100%; background: #fff; } table.data caption { caption-side: top; text-align: left; padding: 0.75rem 0; font-weight: 600; } table.data th, table.data td { padding: 0.6rem 0.8rem; text-align: left; border-bottom: 1px solid var(--rule); } table.data thead th { background: var(--paper-warm); border-bottom: 2px solid var(--ink); font-size: var(--fs-sm); } /* On a phone the auto table algorithm sizes columns to their content, so a fare table overflows the moment a label gets longer — /es/tarifas/ measured 397px against a 374px content box purely because "Personas mayores, 65 y más" is longer than "Senior, 65 and over". Desktop keeps the auto algorithm. Known limit, measured 2026-07-28: the padding recovery below is sized for a ~374px content box and clears a 390px viewport with room to spare, but at 320px the content box is 284px and the Spanish table still runs about 30px wide. English clears it. Fixing that properly means a scroll wrapper around the table rather than more type compression, which is a markup change across both language trees and the theme's fare renderer; it is deliberately not done here. 320px is below the current common phone floor, so this is recorded rather than papered over. */ @media (max-width: 30rem) { /* Deliberately NOT table-layout: fixed, and no overflow-wrap. Both were tried and both break ordinary Spanish words mid-syllable ("Condado / s", "discapacida / d") because a fixed column is narrower than the word it has to hold. The auto algorithm already sizes columns to whole words; the only real problem is that four columns of 0.8rem side padding spend 102px of a 374px content box. Halving the padding returns about 51px, twice the 23px the table was over, so every label stays intact. */ table.data th, table.data td { padding: 0.6rem 0.4rem; } table.data thead th { font-size: 0.8125rem; letter-spacing: 0; } } table.data td.num { font-family: var(--ff-meta); font-variant-numeric: tabular-nums; text-align: right; } /* ------------------------------------------------------- content shapes -- */ /* Deliberately different shapes per job, so the site is not one reskinned card. */ /* minmax(0, 1fr) is load-bearing, not decoration. A grid item defaults to min-width: auto, so a single wide child — the Intercounty timetable is 1884px — forces the implicit column to its intrinsic width and blows the whole page out horizontally. /es/horarios/ measured 1906px against a 390px viewport before this line: the .timetable-wrap overflow-x: auto never got a chance to work, because the wrap itself was being stretched. .grid-2 and .grid-3 already carried the same guard. */ .stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.25rem, 3vw, 2rem); } .grid-2 { display: grid; gap: clamp(1.25rem, 3vw, 2.25rem); } .grid-3 { display: grid; gap: clamp(1.25rem, 3vw, 2rem); } @media (min-width: 46rem) { .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 60rem) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* A service is a plate: a heavy top rule carrying one stop node, a generous label, no border box — the wayfinding row of a transit map. */ .plate { border-top: 3px solid var(--dept); padding-top: 1.15rem; position: relative; } .plate::before { content: ""; position: absolute; top: -7px; left: 0; width: 11px; height: 11px; transform: rotate(45deg); background: var(--dept); } .plate h2, .plate h3 { font-size: var(--fs-md); margin-bottom: 0.35em; } .plate p { font-size: var(--fs-sm); color: var(--ink-soft); } .plate a.plate__link { font-weight: 600; font-size: var(--fs-sm); display: inline-block; min-height: 44px; line-height: 44px; } /* A project is a segment: a labelled band on the stringline with a mono milepost. On the dark corridor band the milepost runs gold. */ .segment { display: grid; gap: 0.35rem 1.25rem; padding: 1.35rem 0 1.35rem 1.75rem; border-bottom: 1px solid var(--rule); position: relative; } .segment::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--line); background: currentColor; opacity: 0.28; } .segment::after { content: ""; position: absolute; left: calc((var(--node) / -2) + (var(--line) / 2)); top: 1.9rem; width: var(--node); height: var(--node); transform: rotate(45deg); background: var(--hill); } @media (min-width: 46rem) { .segment { grid-template-columns: 9rem minmax(0, 1fr); } .segment::after { top: 1.75rem; } } .segment__milepost { font-family: var(--ff-meta); font-size: var(--fs-sm); letter-spacing: 0.08em; text-transform: uppercase; color: var(--hill-deep); padding-top: 0.3em; } .segment h3 { font-size: var(--fs-lg); margin-bottom: 0.25em; } .segment p { margin-bottom: 0; font-size: var(--fs-sm); } /* A record is a row, not a card. */ .record-row { display: grid; gap: 0.2rem 1rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); } @media (min-width: 46rem) { .record-row { grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: baseline; } } .record-row__date { font-family: var(--ff-meta); font-size: var(--fs-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; } .record-row__title { font-weight: 600; max-width: 58ch; } .record-row__meta { font-family: var(--ff-meta); font-size: var(--fs-xs); color: var(--ink-soft); } .figure-note { font-family: var(--ff-meta); font-size: var(--fs-xs); color: var(--ink-soft); margin-top: 0.5rem; max-width: 60ch; } .callout { border-left: 4px solid var(--hill); background: #fbf6e6; padding: 1rem 1.25rem; margin: 1.75rem 0; } .callout > :last-child { margin-bottom: 0; } .alert-banner { background: var(--alert-bg); border-block: 2px solid var(--alert); padding: 0.9rem 0; } .alert-banner strong { color: var(--alert); } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 48px; padding: 0.6rem 1.4rem; font-weight: 600; font-size: var(--fs-sm); border: 2px solid var(--ink); background: var(--dept); color: var(--dept-on); text-decoration: none; border-radius: var(--radius); cursor: pointer; } .btn:hover { background: var(--accent-800); } .site-transit .btn:hover { background: var(--chaparral-deep); } .btn--quiet { background: transparent; color: var(--ink); } .btn--quiet:hover { background: var(--accent-50); } .room-corridor .btn { background: var(--accent-300); color: var(--accent-900); border-color: var(--accent-300); } .room-corridor .btn:hover { background: #fff; border-color: #fff; } /* ---------------------------------------------------- search and answer -- */ .answer { border: 2px solid var(--ink); border-left-width: 6px; border-left-color: var(--dept); background: #fff; padding: clamp(1.1rem, 3vw, 1.75rem); margin-bottom: 2rem; } .answer[hidden] { display: none; } .answer .eyebrow { margin-bottom: 0.5rem; } .answer__text { font-size: var(--fs-md); max-width: 62ch; margin-bottom: 1.25rem; } .answer__sources { list-style: none; margin: 0; padding: 0; } .answer__sources li { margin-bottom: 0.4rem; } .facets { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; } .facet { font: inherit; font-size: var(--fs-xs); font-family: var(--ff-meta); min-height: 44px; padding: 0.4rem 0.85rem; border: 2px solid var(--rule); background: #fff; color: var(--ink); cursor: pointer; border-radius: var(--radius); } .facet:hover { border-color: var(--dept); } .facet--on { background: var(--dept); border-color: var(--dept); color: var(--dept-on); } .breadcrumb { font-family: var(--ff-meta); font-size: var(--fs-xs); padding-block: 0.85rem; color: var(--ink-soft); } .breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; } .breadcrumb li + li::before { content: "/"; margin-right: 0.4rem; color: var(--rule); } .page-head { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 3.5vw, 2.5rem); } .page-head h1 { font-size: var(--fs-2xl); max-width: 22ch; } .page-head .lede { font-size: var(--fs-md); max-width: 54ch; color: var(--ink-soft); } /* The interior signature: a short corridor rule closing the head, so every page opens on the motif, not on bare type. */ .page-head::after { content: ""; display: block; height: 3px; margin-top: clamp(1.5rem, 3.5vw, 2.5rem); max-width: 14rem; background: var(--dept); } .lang-switch { font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.06em; } .lang-switch a { color: var(--accent-800); } /* -------------------------------------------------------------- footer -- */ /* The footer opens with the corridor's terminal rule: one gold rail, two nodes, carrying the county's two anchors — pure CSS so every page inherits the signature without a markup change. */ .site-footer { background: var(--ink); color: #e8e2d5; padding-block: clamp(2.5rem, 6vw, 4rem) 1.75rem; margin-top: clamp(3rem, 7vw, 5rem); position: relative; } .site-footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--hill); } .site-footer a { color: #d9cfae; } .site-footer h2 { font-size: var(--fs-md); color: #fff; margin-bottom: 0.6em; } .site-footer__grid { display: grid; gap: 2rem; } @media (min-width: 52rem) { .site-footer__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1.1fr); } } .site-footer ul { list-style: none; margin: 0; padding: 0; } .site-footer li { margin-bottom: 0.45rem; } .site-footer__note { border-top: 1px solid rgba(255, 255, 255, 0.18); margin-top: 2rem; padding-top: 1.1rem; font-family: var(--ff-meta); font-size: var(--fs-xs); color: #b6ae9c; } .subscribe__row { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .subscribe__row input { flex: 1 1 12rem; min-width: 0; font: inherit; font-size: var(--fs-sm); padding: 0.6rem 0.75rem; border: 2px solid #55504a; background: #211e1a; color: #f2ede2; } /* The field's own colour was set but its placeholder was not, so it fell back to the user-agent default (#757575) — a grey tuned for white fields, which lands at 3.6:1 on this charcoal one. --paper-dim is the token PR #1123 added for exactly this job: dim enough to read as secondary on a dark ground, light enough to clear AA on it. The masthead omnibox sets its own because it sits on white. */ .subscribe__row input::placeholder { color: var(--paper-dim); opacity: 1; } /* One county-derived edge color carries the complete chrome from notice to footer, rather than leaving the scaffold classes on unrelated defaults. */ .proto-banner, .site-header, .brand, .site-nav, .site-footer { border-color: var(--ink); } .subscribe__row button { font: inherit; font-weight: 600; font-size: var(--fs-sm); min-height: 44px; padding-inline: 1.1rem; border: 2px solid var(--hill); background: var(--hill); color: #201a06; cursor: pointer; } .form-status { margin-top: 0.6rem; font-size: var(--fs-sm); } /* ------------------------------------------------------------- motion -- */ @media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } /* The @supports gate is load-bearing, not belt-and-braces: `animation: … both` holds the from-state until a timeline advances it, so in an engine without scroll-driven animations (Firefox today) an ungated .reveal parks the whole section at opacity 0 forever. Gated, the still layout IS the fallback. */ @supports (animation-timeline: view()) { .reveal { animation: corridor-reveal linear both; animation-timeline: view(); animation-range: entry 5% cover 30%; } @keyframes corridor-reveal { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } } .board__rail span { transition: width 220ms ease; } } @media (prefers-reduced-motion: reduce) { ::view-transition-group(*) { animation: none; } .reveal { opacity: 1; transform: none; animation: none; } } /* --------------------------------------------------------------- print -- */ @media print { .proto-banner, .site-header, .site-nav, .site-footer, .omnibox, .departure-strip, .skip-link { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .room { padding-block: 0.5rem; } .timetable-wrap { overflow: visible; border: 1px solid #000; } table.timetable thead th { position: static; background: #eee; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } /* ------------------------------------------------- long-index surfaces -- */ .index-figure { margin: 0 auto clamp(1.5rem, 4vw, 2.5rem); } .index-figure img { width: 100%; max-height: 340px; object-fit: cover; object-position: center 55%; border: 2px solid var(--ink); } /* The downtown Hollister frame is shot through a windshield: its historic streetwall runs across the upper third and two loaded pickups own the middle. A fixed band raised off centre keeps the storefronts as the subject at every width. max-height alone will not do it — below about 460px of container the band stops biting and a phone gets the whole snapshot, trucks and all, back. */ .index-figure--street img { max-height: none; aspect-ratio: 5 / 2; object-position: center 34%; } .index-figure--transit { max-width: 64rem; } .index-figure--transit img { max-height: none; aspect-ratio: 1174 / 569; object-position: center; } .index-figure--meeting { max-width: 52rem; } .index-figure--meeting img { max-height: none; aspect-ratio: 850 / 581; object-position: center; } .index-figure--office { max-width: 48rem; } .index-figure--office img { max-height: none; aspect-ratio: 1000 / 774; object-position: center; } .records-corpus { max-width: 60rem; margin-block: 1.5rem 2.5rem; } .records-corpus__graphic { display: block; width: 100%; height: auto; background: var(--paper-warm); border-block: 2px solid var(--ink); } .rideshare-figure { max-width: 58rem; margin: 0 auto 2rem; } .rideshare-figure img { width: 100%; aspect-ratio: 920 / 340; object-fit: cover; object-position: center; border: 2px solid var(--ink); } .index-controls { position: sticky; top: var(--stoa-index-sticky-top, 0px); z-index: 20; background: var(--paper); border-bottom: 2px solid var(--ink); padding-block: 0.85rem; margin-bottom: 1.5rem; } .index-filter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } .index-filter__row label[for] { font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .index-filter input[type="search"], .index-filter select { font: inherit; font-size: var(--fs-sm); min-height: 44px; padding: 0.4rem 0.6rem; border: 2px solid var(--ink); background: #fff; color: var(--ink); border-radius: var(--radius); } .index-filter input[type="search"] { flex: 1 1 14rem; min-width: 0; } .index-count { margin: 0.6rem 0 0; } .index-pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 2rem 0 0; padding-top: 1.25rem; border-top: 2px solid var(--rule); } .index-page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 0.7rem; font-family: var(--ff-meta); font-size: var(--fs-sm); border: 2px solid var(--rule); text-decoration: none; color: var(--ink); border-radius: var(--radius); } .index-page-link:hover { border-color: var(--dept); } .index-page-link--current { background: var(--dept); border-color: var(--dept); color: var(--dept-on); font-weight: 700; } .meeting-body { padding-block: clamp(1.75rem, 4vw, 2.5rem); border-top: 2px solid var(--rule); } .meeting-body:first-child { border-top: 0; padding-top: 0; } .meeting-body h2 { font-size: var(--fs-lg); } .meeting-body > p:first-of-type { max-width: var(--measure); color: var(--ink-soft); } /* The two-agency diagram on /about/: one corridor spine, two columns of role * facts either side of it, built from grid + the existing rule/diamond motif * rather than a hand-drawn illustration. */ .agency-split { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); margin: 2rem 0; align-items: start; } @media (min-width: 46rem) { .agency-split { grid-template-columns: 1fr 2px 1fr; } } .agency-split__col h3 { font-size: var(--fs-lg); margin-bottom: 0.15em; } .agency-split__col > .meta { margin-bottom: 1rem; } .agency-split__col dl { margin: 0; } .agency-split__col dl > div { padding: 0.85rem 0; border-top: 1px solid rgba(255, 255, 255, 0.18); } .agency-split__col dl > div:first-child { border-top: 0; padding-top: 0; } .agency-split__col dt { font-family: var(--ff-meta); font-size: var(--fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-300); margin-bottom: 0.3em; } .agency-split__col dd { margin: 0; max-width: var(--measure); } .agency-split__spine { display: none; position: relative; background: rgba(255, 255, 255, 0.22); min-height: 100%; } @media (min-width: 46rem) { .agency-split__spine { display: block; } } .agency-split__spine::before, .agency-split__spine::after { content: ""; position: absolute; left: 50%; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: var(--hill); } .agency-split__spine::before { top: 0; } .agency-split__spine::after { bottom: 0; } /* ------------------------------------------- room-independent surfaces -- */ /* * These components bring their own light background, so they must also bring * their own ink. Without this they inherit the surrounding room's colour and * a callout dropped into the dark corridor band renders pale-on-pale, which * is exactly how the "next departures" panel disappeared on /ride/next-bus/. * Any new light-surface component belongs in this list. */ .callout, .board, .timetable-wrap, .corridor-empty, .answer, table.data, table.timetable { color: var(--ink); } .callout a, .board a, .corridor-empty a, .answer a, table.data a, table.timetable a { color: var(--accent-700); } .site-transit .callout a, .site-transit .board a, .site-transit .corridor-empty a, .site-transit .answer a, .site-transit table.data a, .site-transit table.timetable a { color: var(--chaparral-deep); } .callout .meta, .board .meta, .corridor-empty .meta, .answer .meta, table.data .meta { color: var(--ink-soft); } .callout .eyebrow, .board .eyebrow, .corridor-empty .eyebrow, .answer .eyebrow { color: var(--ink-soft); } .search-starts { margin-bottom: 1.75rem; } .search-starts__list { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; } .search-starts__list li { max-width: none; }