@museumwnf/viewer-layout 3.2.2 → 3.3.0

package/src/styles/dxa-exhibition.css

@@ -0,0 +1,365 @@
+/*
+ * The DXA exhibition family's stylesheet: what every exhibition shares beyond
+ * the components — its fonts, its page reset, its theme as a function of the
+ * palette, and the page column and menu legacy's exhibitions all had.
+ *
+ * An exhibition imports it after the package's own stylesheet and before its
+ * theme, so that the theme's values win:
+ *
+ *   import '@museumwnf/viewer-layout/style.css'
+ *   import '@museumwnf/viewer-layout/dxa/exhibition.css'
+ *   import '../theme/tokens.css'
+ *   import '../theme/overrides.css'
+ *
+ * The exhibition's theme/tokens.css sets the palette — legacy's six colours,
+ * which the exhibitions client took from per-deployment `VUE_APP_VO_*`
+ * variables, read off the legacy exhibition's compiled stylesheet:
+ *
+ *   --main-color, --main-text-color             header rule, themes gutter, footer
+ *   --secondary-color, --secondary-text-color   the page, the theme pages
+ *   --contrast-color, --contrast-text-color     menu, theme titles, bottom banner
+ *
+ * Every token below can be set again in the exhibition's theme/tokens.css;
+ * the exhibition's value wins. A dark secondary ground may need the muted and
+ * caption greys lightened, as arts-in-dialogue's are.
+ */
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,300;0,400;0,700;1,400&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');
+
+/* ── Theme: the family's tokens, read from the palette ───────────────────── */
+:root {
+  /* ---------- Global ---------- */
+  --mwnf-font-body: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
+  --mwnf-font-heading: 'Roboto Condensed', 'Roboto', Arial, sans-serif;
+  --mwnf-line-height: 1.4;
+  --mwnf-weight-heading: 700;
+  --mwnf-color-text: var(--secondary-text-color);
+  --mwnf-color-background: var(--secondary-color);
+  --mwnf-color-accent: var(--contrast-color);
+  --mwnf-color-muted: #555555;
+  --mwnf-color-border: #e0e0e0;
+  --mwnf-content-width: 100%;
+  --mwnf-content-padding: 0rem;
+  --mwnf-space: 0.75rem;
+  --mwnf-radius: 0;
+  --mwnf-section-border: none;
+  --mwnf-section-title-size: 1rem;
+
+  /* ---------- Header ---------- */
+  --mwnf-header-padding: 0;
+  --mwnf-header-background: #ffffff;
+  --mwnf-header-text: #000000;
+  --mwnf-header-title-size: 1.375rem;
+  --mwnf-header-subtitle-size: 0.875rem;
+  --mwnf-header-subtitle-color: #000000;
+
+  /* ---------- Banner ---------- */
+  --mwnf-banner-padding: 0;
+  --mwnf-banner-background: var(--main-color);
+  --mwnf-banner-text-color: var(--main-text-color);
+  --mwnf-banner-text-size: 1.25rem;
+  --mwnf-banner-max-height: none;
+
+  /* ---------- Navigation ---------- */
+  --mwnf-nav-padding: 0;
+  --mwnf-nav-background: var(--contrast-color);
+  --mwnf-nav-border: none;
+  --mwnf-nav-gap: 0px;
+  --mwnf-nav-link-color: var(--contrast-text-color);
+  --mwnf-nav-link-active-color: var(--contrast-text-color);
+  --mwnf-nav-link-weight: 700;
+
+  /* ---------- Content ---------- */
+  --mwnf-content-padding-block: 0;
+  --mwnf-content-background: var(--secondary-color);
+
+  /* ---------- Hyperlinks (the exhibition's bottom banner) ---------- */
+  --mwnf-hyperlinks-padding: 0;
+  --mwnf-hyperlinks-background: var(--contrast-color);
+  --mwnf-hyperlinks-link-color: var(--contrast-text-color);
+
+  /* ---------- Sponsors (the logo strip) ---------- */
+  --mwnf-sponsors-padding: 0;
+  --mwnf-sponsors-background: #ffffff;
+  --mwnf-sponsors-gap: 1.875rem;
+  --mwnf-sponsors-logo-height: 4.375rem;
+
+  /* ---------- Footer ---------- */
+  --mwnf-footer-padding: 0.5rem;
+  --mwnf-footer-background: var(--main-color);
+  --mwnf-footer-text-color: var(--main-text-color);
+  --mwnf-footer-text-size: 0.875rem;
+  --mwnf-footer-justify: center;
+  --mwnf-footer-gap: 0.5rem;
+  --mwnf-footer-link-color: var(--main-text-color);
+
+  /* ---------- Header: mark, co-organiser logos, title cell, links, search ---------- */
+  --mwnf-header-gap: 1rem;
+  --mwnf-header-logos-title-size: 0.75rem;
+  --mwnf-header-logo-gap: 0.625rem;
+  --mwnf-header-logo-height: 2.875rem;
+  --mwnf-header-title-line-height: 1.1;
+  --mwnf-header-tools-size: 0.875rem;
+  --mwnf-header-link-color: #000000;
+  --mwnf-header-links-separator: "|";
+  --mwnf-header-control-border: 2px solid #000000;
+  --mwnf-header-control-background: #ffffff;
+  --mwnf-header-control-text: #000000;
+  --mwnf-header-button-border: 2px solid var(--contrast-color);
+  --mwnf-header-button-background: var(--contrast-color);
+  --mwnf-header-button-text: var(--contrast-text-color);
+  --mwnf-header-button-active-background: var(--main-color);
+  --mwnf-header-button-active-text: var(--main-text-color);
+
+  /* ---------- Banner: the split home banner and the narrow section strip ---------- */
+  --mwnf-banner-media-background: var(--main-color);
+  --mwnf-banner-fallback: linear-gradient(160deg, var(--main-color), var(--contrast-color));
+  --mwnf-banner-split-media-width: 60%;
+  --mwnf-banner-split-body-width: 40%;
+  --mwnf-banner-split-min-height: 43.75rem;
+  --mwnf-banner-split-padding: 3.125rem 1.25rem;
+  --mwnf-banner-split-gap: 1.5625rem;
+  --mwnf-banner-split-title-size: calc(0.75rem + 1.2vw);
+  --mwnf-banner-split-subtitle-size: 65%;
+  --mwnf-banner-body-background: var(--main-color);
+  --mwnf-banner-body-text: var(--main-text-color);
+  --mwnf-banner-body-accent: var(--contrast-color);
+  --mwnf-banner-headline-width: 28.75rem;
+  --mwnf-banner-headline-size: 0.9375rem;
+  --mwnf-banner-enter-size: 1.25rem;
+  --mwnf-banner-strapline-size: 0.875rem;
+  --mwnf-banner-caption-background: var(--main-color);
+  --mwnf-banner-caption-text: var(--main-text-color);
+  --mwnf-banner-caption-width: 35%;
+  --mwnf-banner-overlay-text: var(--contrast-text-color);
+  --mwnf-banner-overlay-background: color-mix(in srgb, var(--contrast-color) 60%, transparent);
+  --mwnf-banner-section-height: 20vh;
+  --mwnf-banner-section-max-height: 150px;
+  --mwnf-banner-section-title-size: clamp(1.25rem, 3vw, 2.375rem);
+
+  /* ---------- Content: the record page ---------- */
+  /* The sheet as the exhibition platform set it: bold black labels over
+     plain values, no cell borders, the photo gallery on a white ground, the
+     accent on the active thumbnail and the popover frame. */
+  --mwnf-sheet-text-size: 0.9375rem;
+  --mwnf-sheet-label-size: 0.9375rem;
+  --mwnf-sheet-label-weight: 700;
+  --mwnf-sheet-label-color: var(--secondary-text-color);
+  --mwnf-sheet-gap: 0.75rem;
+  --mwnf-sheet-toggle-color: var(--secondary-text-color);
+  --mwnf-sheet-term-color: var(--secondary-text-color);
+  --mwnf-sheet-term-underline: var(--contrast-color);
+  --mwnf-sheet-section-border: 1px solid #e0e0e0;
+  --mwnf-sheet-heading-size: 1rem;
+  --mwnf-sheet-heading-color: var(--secondary-text-color);
+  --mwnf-credits-border: 1px solid #e0e0e0;
+  --mwnf-credits-size: 0.875rem;
+  --mwnf-credits-color: var(--secondary-text-color);
+  --mwnf-languages-gap: 0.125rem;
+  --mwnf-languages-button-border: 1px solid #000000;
+  --mwnf-languages-button-text: #000000;
+  --mwnf-languages-button-size: 0.8125rem;
+  --mwnf-languages-active-background: var(--main-color);
+  --mwnf-languages-active-text: var(--main-text-color);
+  --mwnf-media-background: var(--secondary-color);
+  --mwnf-media-thumb-active-border: 2px solid var(--contrast-color);
+  --mwnf-media-caption-color: #555555;
+  --mwnf-popover-border: 2px solid var(--contrast-color);
+  --mwnf-popover-title-background: var(--main-color);
+  --mwnf-grid-card-background: color-mix(in srgb, var(--main-color) 85%, transparent);
+
+  /* ---------- Content: the lists ---------- */
+  /* The tile grid, the "filter further by" column, the summary line and the
+     page links as the platform drew them: white controls with a grey border,
+     the active page in black. */
+  --mwnf-grid-columns: 3;
+  --mwnf-grid-gap: 4px;
+  --mwnf-grid-tile-background: #ffffff;
+  --mwnf-grid-card-text: #ffffff;
+  --mwnf-filter-padding: 14px;
+  --mwnf-filter-border: none;
+  --mwnf-filter-background: #e0e0e0;
+  --mwnf-filter-gap: 10px;
+  --mwnf-filter-title-size: 1rem;
+  --mwnf-filter-title-color: #000000;
+  --mwnf-filter-control-border: 1px solid #999999;
+  --mwnf-filter-control-background: #ffffff;
+  --mwnf-filter-control-padding: 5px;
+  --mwnf-filter-reset-background: var(--main-color);
+  --mwnf-filter-reset-text: var(--main-text-color);
+  --mwnf-summary-size: 0.9375rem;
+  --mwnf-summary-color: var(--secondary-text-color);
+  --mwnf-summary-value-color: var(--secondary-text-color);
+  --mwnf-summary-border: none;
+  --mwnf-summary-padding: 0;
+  --mwnf-pagination-size: 0.8125rem;
+  --mwnf-pagination-button-border: 1px solid var(--secondary-text-color);
+  --mwnf-pagination-button-background: var(--secondary-color);
+  --mwnf-pagination-button-text: var(--secondary-text-color);
+  --mwnf-pagination-button-hover-background: #e0e0e0;
+  --mwnf-pagination-active-background: var(--main-color);
+  --mwnf-pagination-active-text: var(--main-text-color);
+
+  /* ---------- Navigation: the menu button ---------- */
+  --mwnf-nav-toggle-background: var(--contrast-color);
+  --mwnf-nav-toggle-color: var(--contrast-text-color);
+
+  /* ---------- Hyperlinks: the bottom banner tiles ---------- */
+  --mwnf-hyperlinks-tiles-padding: 3.125rem;
+  --mwnf-hyperlinks-tiles-gap: 1.5625rem;
+  --mwnf-hyperlinks-tiles-text: var(--contrast-text-color);
+  --mwnf-hyperlinks-tiles-size: 1.125rem;
+
+  /* ---------- Sponsors: the logo strip, grouped under its headings ---------- */
+  --mwnf-sponsors-groups-justify: center;
+  --mwnf-sponsors-groups-gap: 2.5rem;
+  --mwnf-sponsors-group-gap: 0.5rem;
+  --mwnf-sponsors-group-title-size: 0.75rem;
+  --mwnf-sponsors-group-title-color: #000000;
+
+  /* ---------- Links ---------- */
+  /* The content links in legacy's blue. The Back button and the related
+     content's links are in the main colour, and a theme's links turn the
+     contrast colour under the pointer, as legacy drew them. */
+  --mwnf-link-text: #0000ff;
+  --mwnf-back-link-color: var(--main-color);
+  --mwnf-link-list-link-color: var(--main-color);
+  --mwnf-card-accordion-child-hover-color: var(--contrast-color);
+
+  /* ---------- The family pages ---------- */
+  /* Page headings and tab labels in the secondary text colour; the grey band
+     behind the profile's language row and the "timeline for this search"
+     box. */
+  --mwnf-dxa-heading-color: var(--secondary-text-color);
+  --mwnf-dxa-band-background: #e0e0e0;
+
+  /* ---------- PartnerListView group heading ---------- */
+  --mwnf-partner-list-group-title-size: 1.25rem;
+  --mwnf-partner-list-group-title-color: var(--secondary-text-color);
+
+  /* ---------- The theme pages (@museumwnf/viewer-layout/dxa) ---------- */
+  /* Legacy's three theme colours: the pages' ground and text, the heading
+     band and link hover, and the themes page's left half. */
+  --mwnf-dxa-theme-background: var(--secondary-color);
+  --mwnf-dxa-theme-text: var(--secondary-text-color);
+  --mwnf-dxa-theme-contrast: var(--contrast-color);
+  --mwnf-dxa-theme-contrast-text: var(--contrast-text-color);
+  --mwnf-dxa-theme-main: var(--main-color);
+
+  /* ---------- The item page (@museumwnf/viewer-layout/dxa) ---------- */
+  /* Legacy's item page sat on the secondary colour; its sheet links are the
+     content links. */
+  --mwnf-dxa-item-background: var(--secondary-color);
+
+  /* ---------- The sponsor popup, the card numbers, the source lines ---------- */
+  /* The popup on the secondary colour, as legacy's; the card numbers and the
+     source credit in the muted grey, the record's legacy code a shade
+     lighter. */
+  --mwnf-popup-logo-bg: var(--secondary-color);
+  --mwnf-popup-logo-color: var(--secondary-text-color);
+  --mwnf-popup-logo-close-color: var(--secondary-text-color);
+  --mwnf-card-number-color: var(--mwnf-color-muted);
+  --mwnf-source-credit-color: var(--mwnf-color-muted);
+  --mwnf-sheet-source-uid-color: #666666;
+}
+
+/* ── Page reset ──────────────────────────────────────────────────────────── */
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+body {
+  background: var(--secondary-color);
+  color: var(--secondary-text-color);
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  overflow-x: hidden;
+}
+
+html[dir='rtl'] body { direction: rtl; }
+
+a { color: inherit; }
+
+/* ── The page column and the menu ────────────────────────────────────────── */
+/* The legacy exhibition is a fixed-width page column with edge-to-edge
+   chrome inside it — a shape PageShell's tokens alone cannot express, since
+   they assume a centred content measure and flex navigation. These rules
+   restate the column and let each section manage its own gutters. */
+
+/* A 1350px column centred on the viewport, with a drop shadow marking its
+   edges. */
+.mwnf-page {
+  width: 1350px;
+  max-width: 100vw;
+  box-shadow: 0 2px 8px 2px #707070;
+}
+
+/* The header stays put while the page scrolls, and carries the platform's
+   5px accent rule under it rather than the solid dark bar the galleries use. */
+.mwnf-header {
+  position: sticky;
+  top: 0;
+  z-index: 90;
+  border-bottom: 5px solid var(--contrast-color);
+}
+.mwnf-nav {
+  z-index: 89;
+}
+
+/* The navigation is a full-width grid rather than PageShell's flex row. */
+.mwnf-nav__bar {
+  display: block;
+}
+
+/* The menu: one equal column per entry, however many there are, upper-cased
+   in CSS so each entry is stored in its natural case — the only form a
+   translator can work with, and the only form that means anything in a
+   language without capitals. */
+.mwnf-nav__links {
+  display: grid;
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  width: 100%;
+}
+.mwnf-nav__links li {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--contrast-color);
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  line-height: 28px;
+}
+.mwnf-nav__link {
+  width: 100%;
+  text-align: center;
+  padding: 2px 4px;
+  font-size: 96%;
+  text-transform: uppercase;
+}
+.mwnf-nav__link--active {
+  background: rgba(0, 0, 0, 0.14);
+  text-decoration: none;
+}
+
+/* The header row and the three banded sections are edge to edge inside the
+   column, each managing its own gutters. */
+.mwnf-header__inner {
+  min-height: 80px;
+  padding-inline: 14px 12px;
+}
+.mwnf-banner,
+.mwnf-hyperlinks,
+.mwnf-sponsors {
+  padding-inline: 0;
+}
+
+/* The footer: one centred line of links and the copyright. */
+.mwnf-footer {
+  justify-content: center;
+  text-align: center;
+}
+
+@media only screen and (max-width: 48rem) {
+  .mwnf-nav__links { grid-auto-flow: row; }
+  .mwnf-nav--open .mwnf-nav__links { display: grid; }
+  .mwnf-nav__toggle { width: 100%; justify-content: center; font-size: 20px; }
+}