/* ============================================================ CITY GALLERY ============================================================ */ .city-gallery { width: 100%; background: #fff; } .city-gallery__title { margin: 0 0 1.25rem; color: var(--navy); font-weight: 900; text-transform: uppercase; } .city-gallery__copy { max-width: 1100px; margin: 0 0 2.5rem; color: var(--ink); text-wrap: pretty; } /* ============================================================ CITY GALLERY FILTERS ============================================================ */ .city-gallery__filters { display: flex; flex-wrap: wrap; gap: 1rem; margin: 0 0 2.5rem; } .city-gallery__filter { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: .85rem 1.75rem; border: 2px solid var(--navy); background: #fff; color: var(--navy); font-family: inherit; font-size: var(--h6); font-weight: 900; line-height: 1.2; letter-spacing: .05rem; text-align: center; text-transform: uppercase; cursor: pointer; transition: background-color .25s ease-in-out, border-color .25s ease-in-out, color .25s ease-in-out, opacity .25s ease-in-out; } /* ============================================================ FILTER HOVER ============================================================ */ .city-gallery__filter:hover { border-color: var(--green); background: var(--green); color: #fff; } /* ============================================================ FILTER ACTIVE ============================================================ */ .city-gallery__filter.is-active { border-color: var(--navy); background: var(--navy); color: #fff; } .city-gallery__filter.is-active:hover { border-color: var(--navy); background: var(--navy); color: #fff; } /* ============================================================ FILTER FOCUS ============================================================ */ .city-gallery__filter:focus { outline: none; } .city-gallery__filter:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; } /* ============================================================ CITY GALLERY GRID ============================================================ */ .city-gallery__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; width: 100%; opacity: 1; transform: translateY(0); transition: opacity .35s ease-in-out, transform .35s ease-in-out; } /* ============================================================ CITY GALLERY AJAX TRANSITION ============================================================ */ /* * JS adds this class to BEFORE the Drupal AJAX request. * * The existing results fade slightly. * The newly inserted Drupal results inherit the same state, * preventing the white flash / blink. */ html.city-filter-is-loading .city-gallery__grid { opacity: .15; transform: translateY(4px); pointer-events: none; } /* * Prevent multiple filter clicks while Drupal * is replacing the View results. */ html.city-filter-is-loading .city-gallery__filter { pointer-events: none; } /* * Keep active tab visually clear during loading. */ html.city-filter-is-loading .city-gallery__filter.is-active { opacity: .8; } /* ============================================================ CITY GALLERY ITEM ============================================================ */ .city-gallery__item { min-width: 0; width: 100%; } /* ============================================================ DRUPAL VIEWS ROW FALLBACK ============================================================ */ .city-gallery__grid .views-row { min-width: 0; width: 100%; } /* ============================================================ CITY CARD ============================================================ */ .city-card { display: flex; flex-direction: column; width: 100%; height: 100%; background: #fff; color: var(--ink); box-shadow: .35rem .35rem 0 var(--navy); text-decoration: none; transition: transform .25s ease-in-out, box-shadow .25s ease-in-out; } /* ============================================================ CITY CARD HOVER ============================================================ */ .city-card:hover { transform: translate(-.2rem, -.2rem); box-shadow: .55rem .55rem 0 var(--green); color: var(--ink); text-decoration: none; } /* ============================================================ CITY CARD FOCUS ============================================================ */ .city-card:focus { color: var(--ink); text-decoration: none; } .city-card:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; transform: translate(-.2rem, -.2rem); box-shadow: .55rem .55rem 0 var(--green); } /* ============================================================ CITY CARD MEDIA ============================================================ */ .city-card__media { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; background: #eceee7; } /* ============================================================ CITY CARD IMAGES ============================================================ */ .city-card__image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; opacity: 0; pointer-events: none; transition: opacity 1s ease-in-out, transform .4s ease-in-out; } .city-card__image.is-active { opacity: 1; } /* ============================================================ CITY CARD IMAGE HOVER ============================================================ */ .city-card:hover .city-card__image, .city-card:focus-visible .city-card__image { transform: scale(1.06); } /* ============================================================ CITY CARD CONTENT ============================================================ */ .city-card__body { display: flex; flex: 1; flex-direction: column; width: 100%; padding: 1.5rem 1.5rem 1.75rem; background: var(--sand); } /* ============================================================ CITY CARD REGION ============================================================ */ .city-card__region { display: block; margin: 0 0 .4rem; color: var(--green); font-size: .8rem; font-weight: 900; line-height: 1.4; letter-spacing: .12rem; text-transform: uppercase; } /* ============================================================ CITY CARD TITLE ============================================================ */ .city-card__title { display: block; margin: 0; color: var(--navy); font-size: var(--h5); font-weight: 900; line-height: 1.2; text-transform: uppercase; transition: color .25s ease-in-out; } .city-card:hover .city-card__title, .city-card:focus-visible .city-card__title { color: var(--green); } /* ============================================================ CITY CARD POPULATION ============================================================ */ .city-card__population { display: block; margin-top: .5rem; color: var(--ink); font-size: 1rem; line-height: 1.5; } /* ============================================================ HIDE NATIVE DRUPAL EXPOSED FILTER Keep it in the DOM because JS uses it. ============================================================ */ .city-gallery__native-filter { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ============================================================ DRUPAL AJAX ============================================================ */ .city-gallery__native-filter .ajax-progress { display: none !important; } /* ============================================================ LARGE TABLET ============================================================ */ @media screen and (max-width: 1299px) { .city-gallery__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ============================================================ TABLET ============================================================ */ @media screen and (max-width: 991px) { .city-gallery__filters { gap: .85rem; margin-bottom: 2rem; } .city-gallery__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } } /* ============================================================ MOBILE ============================================================ */ @media screen and (max-width: 640px) { .city-gallery__copy { margin-bottom: 2rem; } .city-gallery__filters { gap: .75rem; margin-bottom: 2rem; } .city-gallery__filter { padding: .7rem 1.15rem; font-size: .9rem; } .city-gallery__grid { grid-template-columns: 1fr; gap: 2rem; } .city-card__body { padding: 1.25rem 1.25rem 1.5rem; } } /* ============================================================ SMALL MOBILE ============================================================ */ @media screen and (max-width: 420px) { .city-gallery__filters { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .city-gallery__filter { width: 100%; padding: .7rem .75rem; } } /* ============================================================ REDUCED MOTION ============================================================ */ @media (prefers-reduced-motion: reduce) { .city-gallery__grid, .city-gallery__filter, .city-card, .city-card__image, .city-card__title { transition: none; } .city-card:hover, .city-card:focus-visible { transform: none; } .city-card:hover .city-card__image, .city-card:focus-visible .city-card__image { transform: none; } html.city-filter-is-loading .city-gallery__grid { transform: none; } } .city-gallery__item:has([data-history-node-id="52"]) { order: 100; }