MediaWiki:Common.css

/* Template:Hero: one wide photo across the top of a project or theme page, cropped to the
   front door's hero proportions (16:7, and 4:3 on phones). In the Citizen skin MediaWiki:Citizen.js
   lifts it above the page title so it spans the page; other skins show it at the top of the text. */
.okc-hero { margin: 0 0 1.5rem; overflow: hidden; border-radius: 8px; background: #0b3a4a; line-height: 0; }
.okc-hero p { margin: 0; }
.okc-hero span, .okc-hero a { display: block; }
.okc-hero img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; max-height: 70vh; object-fit: cover; object-position: center; }
.okc-hero--top img { object-position: center top; }
.okc-hero--bottom img { object-position: center bottom; }
@media (max-width: 720px) { .okc-hero img { aspect-ratio: 4 / 3; } }

/* Citizen, reading view: hold the hero back until the script has lifted it, so it does not jump.
   In the editor it stays in place, where it can be clicked and changed. */
html.client-js:not(.ve-activated) body.skin-citizen.action-view #mw-content-text .okc-hero { display: none; }
.okc-hero--lifted { border-radius: 0; margin: 0 0 1rem; }
html.ve-activated .okc-hero--lifted { display: none; }

/* The projects category: a grid of photo tiles per theme, drawn by MediaWiki:Common.js from each
   project's hero and infobox. The alphabetical listing is held back while the tiles load and comes
   back if they cannot. Tiles without a hero photo fall back to the ocean colour. */
html.client-js #mw-content-text:has(.okc-project-tiles) > .mw-category-generated { display: none; }
html.client-js #mw-content-text.okc-project-tiles-failed > .mw-category-generated { display: block; }
.okc-tiles-group { margin: 1.5rem 0 2rem; }
.okc-tiles-group h2 { margin: 0 0 .75rem; }
.okc-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.okc-tile {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: .35rem;
  aspect-ratio: 4 / 3; padding: 1rem; overflow: hidden; border-radius: 8px;
  background: #0b3a4a center / cover no-repeat; color: #fff !important; text-decoration: none !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s ease, box-shadow .15s ease;
}
.okc-tile::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4, 24, 32, .88) 0%, rgba(4, 24, 32, .45) 45%, rgba(4, 24, 32, 0) 75%);
}
.okc-tile:hover, .okc-tile:focus-visible { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .3); }
.okc-tile:focus-visible { outline: 3px solid #3fbbc3; outline-offset: 2px; }
.okc-tile > span { position: relative; }
.okc-tile-meta {
  font-size: .7rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #c9e9ec;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.okc-tile-name {
  font-size: 1.15rem; font-weight: 700; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
@media (prefers-reduced-motion: reduce) { .okc-tile { transition: none; } .okc-tile:hover { transform: none; } }