/** * GAF Gallery - frontend styles * * Everything is driven by the custom properties below. Override them on * :root in your child theme to restyle the whole gallery, including the * lightbox (which is appended to , outside the gallery wrapper). */ :root { /* Layout */ --gaf-gap: 12px; --gaf-min: 260px; --gaf-ratio: 4 / 3; --gaf-radius: 2px; /* Type */ --gaf-font: "Montserrat", "Helvetica Neue", Helvetica, Arial, sans-serif; --gaf-weight-bold: 700; --gaf-weight-semi: 600; /* Colour */ --gaf-ink: #00184f; --gaf-muted: #5a6b8c; --gaf-line: #d3d9e4; --gaf-line-strong: #00184f; --gaf-surface: #eef1f6; --gaf-accent: #00184f; --gaf-accent-ink: #ffffff; --gaf-hover: #95c11f; --gaf-hover-opacity: 0.5; --gaf-focus: #95c11f; /* Motion */ --gaf-ease: cubic-bezier(0.2, 0.7, 0.3, 1); --gaf-speed: 420ms; } .gaf-gallery { color: var(--gaf-ink); font-family: var(--gaf-font); } .gaf-gallery *, .gaf-lightbox * { box-sizing: border-box; } /* --------------------------------------------------------------------- * Filter bar * ------------------------------------------------------------------ */ .gaf-filterbar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 0 0 1.25rem; padding: 0; } .gaf-allbtn { display: inline-flex; align-items: baseline; gap: 0.5em; padding: 0.75em 1.25em; font-family: var(--gaf-font); font-size: 0.875rem; font-weight: var(--gaf-weight-bold); line-height: 1.2; color: var(--gaf-ink); background: transparent; border: 1px solid var(--gaf-line); border-radius: var(--gaf-radius); cursor: pointer; white-space: nowrap; transition: background-color 160ms var(--gaf-ease), border-color 160ms var(--gaf-ease), color 160ms var(--gaf-ease); } .gaf-allbtn:hover, .gaf-allbtn:focus { color: var(--gaf-ink); border-color: var(--gaf-accent); } .gaf-allbtn:focus-visible { outline: 2px solid var(--gaf-hover); outline-offset: 2px; } .gaf-allbtn.is-active, .gaf-allbtn.is-active:hover, .gaf-allbtn.is-active:focus { color: var(--gaf-accent-ink); background: var(--gaf-accent); border-color: var(--gaf-accent); } /* Dropdown */ .gaf-drop { position: relative; align-self: stretch; } .gaf-drop__trigger { display: inline-flex; align-items: center; gap: 0.7em; /* No height:100% here. Inside a stretched flex item that also holds the menu, it resolves against the menu's height and blows the button up to hundreds of pixels tall. align-self on .gaf-drop does the job. */ height: auto; min-height: 100%; padding: 0.75em 1.25em; font-family: var(--gaf-font); font-size: 0.875rem; font-weight: var(--gaf-weight-bold); line-height: 1.2; text-align: left; color: var(--gaf-ink); background: transparent; border: 1px solid var(--gaf-line); border-radius: var(--gaf-radius); cursor: pointer; transition: border-color 160ms var(--gaf-ease), background-color 160ms var(--gaf-ease); } .gaf-drop__trigger:hover, .gaf-drop__trigger:focus, .gaf-drop__trigger[aria-expanded="true"] { color: var(--gaf-ink); border-color: var(--gaf-accent); } .gaf-drop__trigger[aria-expanded="true"] { background: var(--gaf-surface); } .gaf-drop__trigger:focus-visible { outline: 2px solid var(--gaf-hover); outline-offset: 2px; } .gaf-drop__label { flex: 1 1 auto; } .gaf-chev { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform 200ms var(--gaf-ease); } [aria-expanded="true"] .gaf-chev { transform: rotate(180deg); } .gaf-drop__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 400; width: max-content; max-width: min(820px, calc(100vw - 32px)); max-height: min(70vh, 620px); overflow-y: auto; padding: 20px 22px 22px; background: #fff; border: 1px solid var(--gaf-line); border-top: 3px solid var(--gaf-accent); border-radius: var(--gaf-radius); box-shadow: 0 18px 44px rgba(0, 24, 79, 0.16); } .gaf-drop__menu[hidden] { display: none; } .gaf-drop__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px 32px; } /* Sheet header only appears in the mobile bottom-sheet presentation. */ .gaf-drop__sheethead { display: none; } .gaf-drop__col { min-width: 0; } .gaf-drop__title { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 0 0 10px; padding: 0 0 8px; font-family: var(--gaf-font); font-size: 0.6875rem; font-weight: var(--gaf-weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gaf-ink); border-bottom: 2px solid var(--gaf-hover); } .gaf-drop__groupcount { font-size: 0.625rem; font-variant-numeric: tabular-nums; letter-spacing: 0.06em; color: var(--gaf-muted); } .gaf-drop__list { margin: 0; padding: 0; list-style: none; } .gaf-drop__list li { margin: 0; padding: 0; list-style: none; } .gaf-lnk { position: relative; display: flex; align-items: baseline; gap: 0.6em; width: 100%; padding: 7px 8px 7px 11px; font-family: var(--gaf-font); font-size: 0.8125rem; font-weight: var(--gaf-weight-semi); line-height: 1.35; text-align: left; color: var(--gaf-ink); background: transparent; border: 0; border-radius: var(--gaf-radius); cursor: pointer; transition: background-color 140ms var(--gaf-ease), color 140ms var(--gaf-ease); } /* The green accent lives in a bar, not behind the words. A 50% green wash under text is unreadable, and many themes force white text on hover, so the colour is re-declared on every interactive state. */ .gaf-lnk::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: 3px; background: var(--gaf-hover); border-radius: 2px; opacity: 0; transition: opacity 140ms var(--gaf-ease); } .gaf-lnk:hover, .gaf-lnk:focus, .gaf-lnk:active { color: var(--gaf-ink); background: rgba(0, 24, 79, 0.06); } .gaf-lnk:hover::before, .gaf-lnk:focus::before { opacity: 1; } .gaf-lnk:focus-visible { outline: 2px solid var(--gaf-accent); outline-offset: -2px; } .gaf-lnk.is-active, .gaf-lnk.is-active:hover, .gaf-lnk.is-active:focus { color: var(--gaf-accent-ink); background: var(--gaf-accent); font-weight: var(--gaf-weight-bold); } .gaf-lnk.is-active::before { opacity: 1; } .gaf-lnk__label { flex: 1 1 auto; } .gaf-lnk__count { flex: 0 0 auto; font-size: 0.625rem; font-weight: var(--gaf-weight-bold); font-variant-numeric: tabular-nums; color: var(--gaf-muted); } .gaf-lnk.is-active .gaf-lnk__count, .gaf-allbtn.is-active .gaf-lnk__count { color: rgba(255, 255, 255, 0.7); } /* --------------------------------------------------------------------- * Mobile bottom sheet * * On narrow screens the menu is moved to and shown as a sheet. * Fixed positioning takes it out of flow entirely, so it can never be * overlapped by the gallery or stretch its parent button. * ------------------------------------------------------------------ */ .gaf-drop__backdrop { position: fixed; inset: 0; z-index: 99998; background: rgba(0, 8, 26, 0.55); opacity: 0; transition: opacity 200ms var(--gaf-ease); } .gaf-drop__backdrop.is-open { opacity: 1; } .gaf-drop__menu.is-sheet { position: fixed; top: auto; right: 0; bottom: 0; left: 0; z-index: 99999; display: flex; flex-direction: column; width: auto; max-width: none; max-height: 85vh; padding: 0; border: 0; border-top: 3px solid var(--gaf-hover); border-radius: 14px 14px 0 0; box-shadow: 0 -12px 40px rgba(0, 8, 26, 0.3); transform: translateY(100%); transition: transform 260ms var(--gaf-ease); } .gaf-drop__menu.is-sheet.is-open { transform: translateY(0); } .gaf-drop__menu.is-sheet .gaf-drop__sheethead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex: 0 0 auto; padding: 16px 18px 14px; border-bottom: 1px solid var(--gaf-line); } .gaf-drop__sheettitle { font-family: var(--gaf-font); font-size: 0.8125rem; font-weight: var(--gaf-weight-bold); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gaf-ink); } .gaf-drop__close { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 40px; height: 40px; padding: 0; color: var(--gaf-ink); background: var(--gaf-surface); border: 1px solid var(--gaf-line); border-radius: var(--gaf-radius); cursor: pointer; } .gaf-drop__close:hover, .gaf-drop__close:focus { color: var(--gaf-accent-ink); background: var(--gaf-accent); border-color: var(--gaf-accent); } .gaf-drop__close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; } .gaf-drop__menu.is-sheet .gaf-drop__cols { flex: 1 1 auto; grid-template-columns: 1fr; gap: 22px; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px 14px calc(20px + env(safe-area-inset-bottom, 0px)); } .gaf-drop__menu.is-sheet .gaf-lnk { /* Comfortable thumb target. */ min-height: 46px; align-items: center; padding: 10px 10px 10px 14px; font-size: 0.9375rem; border-bottom: 1px solid rgba(0, 24, 79, 0.07); border-radius: 0; } .gaf-drop__menu.is-sheet .gaf-lnk__count { font-size: 0.75rem; } @media (prefers-reduced-motion: reduce) { .gaf-drop__menu.is-sheet { transition: none; transform: translateY(0); } } .gaf-active { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 1.75rem; padding: 11px 14px; background: var(--gaf-surface); border-left: 4px solid var(--gaf-hover); border-radius: 0 var(--gaf-radius) var(--gaf-radius) 0; } .gaf-active[hidden] { display: none; } .gaf-active__label { font-size: 0.625rem; font-weight: var(--gaf-weight-bold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gaf-muted); } .gaf-active__name { flex: 1 1 auto; font-size: 0.875rem; font-weight: var(--gaf-weight-bold); } .gaf-active__clear { display: inline-flex; align-items: center; gap: 0.5em; padding: 5px 10px; font-family: var(--gaf-font); font-size: 0.6875rem; font-weight: var(--gaf-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gaf-ink); background: #fff; border: 1px solid var(--gaf-line); border-radius: var(--gaf-radius); cursor: pointer; transition: background-color 140ms var(--gaf-ease), color 140ms var(--gaf-ease), border-color 140ms var(--gaf-ease); } .gaf-active__clear:hover { color: var(--gaf-accent-ink); background: var(--gaf-accent); border-color: var(--gaf-accent); } .gaf-active__clear svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; } /* --------------------------------------------------------------------- * Folder heading - reads like a line on a spec sheet * ------------------------------------------------------------------ */ .gaf-folder { margin: 0 0 3.5rem; } .gaf-folder:last-of-type { margin-bottom: 0; } .gaf-folder[hidden] { display: none; } .gaf-folder__head { display: flex; align-items: baseline; gap: 0.9rem; margin: 0 0 1.15rem; padding: 0 0 0.65rem; border-bottom: 2px solid var(--gaf-line-strong); } .gaf-folder__title { margin: 0; font-family: var(--gaf-font); font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.55rem); font-weight: var(--gaf-weight-bold); line-height: 1.15; letter-spacing: -0.01em; color: var(--gaf-ink); } .gaf-folder__rule { flex: 1 1 auto; min-width: 1rem; height: 1px; background: var(--gaf-line); transform: translateY(-0.25em); } .gaf-folder__count { flex: 0 0 auto; font-size: 0.7rem; font-weight: var(--gaf-weight-semi); font-variant-numeric: tabular-nums; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gaf-muted); white-space: nowrap; } /* --------------------------------------------------------------------- * Grid * ------------------------------------------------------------------ */ .gaf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--gaf-min), 1fr)); gap: var(--gaf-gap); margin: 0; padding: 0; list-style: none; } .gaf-gallery--fixed-cols .gaf-grid { grid-template-columns: repeat(var(--gaf-columns, 3), minmax(0, 1fr)); } .gaf-grid.is-collapsed .gaf-item--extra { display: none; } /* --------------------------------------------------------------------- * Tile * ------------------------------------------------------------------ */ .gaf-item { position: relative; display: block; text-decoration: none; color: inherit; border-radius: var(--gaf-radius); } .gaf-item__frame { position: relative; display: block; overflow: hidden; aspect-ratio: var(--gaf-ratio); background: var(--gaf-surface); border-radius: var(--gaf-radius); } /* Green wash on hover. Sits above the photo, below the border. */ .gaf-item__frame::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--gaf-hover); border-radius: inherit; opacity: 0; pointer-events: none; transition: opacity 220ms var(--gaf-ease); } .gaf-item__frame::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid rgba(0, 24, 79, 0.1); border-radius: inherit; pointer-events: none; transition: border-color var(--gaf-speed) var(--gaf-ease); } .gaf-item__img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; border-radius: 0; transform: scale(1); transition: transform var(--gaf-speed) var(--gaf-ease); } .gaf-item:hover .gaf-item__frame::before, .gaf-item:focus-visible .gaf-item__frame::before { opacity: var(--gaf-hover-opacity); } .gaf-item:hover .gaf-item__img, .gaf-item:focus-visible .gaf-item__img { transform: scale(1.045); } .gaf-item:hover .gaf-item__frame::after, .gaf-item:focus-visible .gaf-item__frame::after { border-color: var(--gaf-hover); } .gaf-item:focus-visible { outline: 2px solid var(--gaf-accent); outline-offset: 3px; } .gaf-item__caption { display: block; margin: 0.55rem 0 0; font-size: 0.8125rem; font-weight: var(--gaf-weight-semi); line-height: 1.4; color: var(--gaf-muted); } /* Natural (masonry) layout: CSS columns, no cropping. */ .gaf-gallery--natural .gaf-grid { display: block; column-width: var(--gaf-min); column-gap: var(--gaf-gap); } .gaf-gallery--natural.gaf-gallery--fixed-cols .gaf-grid { column-width: auto; column-count: var(--gaf-columns, 3); } .gaf-gallery--natural .gaf-item { display: block; margin: 0 0 var(--gaf-gap); break-inside: avoid; } .gaf-gallery--natural .gaf-item__frame { aspect-ratio: auto; } .gaf-gallery--natural .gaf-item__img { height: auto; } /* --------------------------------------------------------------------- * Show all * ------------------------------------------------------------------ */ .gaf-more { margin: 1.25rem 0 0; text-align: center; } .gaf-more__btn { display: inline-block; padding: 0.75em 1.5em; font-family: var(--gaf-font); font-size: 0.8125rem; font-weight: var(--gaf-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gaf-ink); background: transparent; border: 2px solid var(--gaf-accent); border-radius: var(--gaf-radius); cursor: pointer; transition: background-color 160ms var(--gaf-ease), color 160ms var(--gaf-ease); } .gaf-more__btn:hover { color: var(--gaf-accent-ink); background: var(--gaf-accent); } .gaf-more__btn:focus-visible { outline: 2px solid var(--gaf-hover); outline-offset: 2px; } .gaf-noresults { margin: 2rem 0; font-weight: var(--gaf-weight-semi); color: var(--gaf-muted); text-align: center; } .gaf-empty { padding: 1rem; font-family: var(--gaf-font); color: #5a6b8c; background: #eef1f6; border-left: 3px solid #00184f; } /* --------------------------------------------------------------------- * Lightbox * ------------------------------------------------------------------ */ .gaf-lightbox { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; font-family: var(--gaf-font); background: rgba(0, 8, 26, 0.96); opacity: 0; transition: opacity 220ms var(--gaf-ease); -webkit-font-smoothing: antialiased; } .gaf-lightbox.is-open { opacity: 1; } .gaf-lightbox__stage { position: relative; flex: 1 1 auto; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 3.5rem 1rem 0.5rem; touch-action: pan-y; } .gaf-lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 0; transform: scale(0.985); transition: opacity 260ms var(--gaf-ease, ease), transform 260ms var(--gaf-ease, ease); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); } .gaf-lightbox__img.is-loaded { opacity: 1; transform: scale(1); } .gaf-lightbox__spinner { position: absolute; width: 26px; height: 26px; border: 2px solid rgba(255, 255, 255, 0.25); border-top-color: rgba(255, 255, 255, 0.9); border-radius: 50%; animation: gaf-spin 700ms linear infinite; opacity: 0; transition: opacity 160ms linear; } .gaf-lightbox.is-loading .gaf-lightbox__spinner { opacity: 1; } @keyframes gaf-spin { to { transform: rotate(360deg); } } /* Controls */ .gaf-lightbox__btn { position: absolute; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 2px; cursor: pointer; transition: background-color 160ms ease, border-color 160ms ease, opacity 160ms ease; } .gaf-lightbox__btn:hover { color: #00184f; background: var(--gaf-hover); border-color: var(--gaf-hover); } .gaf-lightbox__btn:focus-visible { outline: 2px solid var(--gaf-hover); outline-offset: 2px; } .gaf-lightbox__btn[disabled] { opacity: 0.25; cursor: default; } .gaf-lightbox__btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; } .gaf-lightbox__close { top: 1rem; right: 1rem; } .gaf-lightbox__prev { top: 50%; left: 1rem; transform: translateY(-50%); } .gaf-lightbox__next { top: 50%; right: 1rem; transform: translateY(-50%); } /* Bottom bar - the spec-sheet line again */ .gaf-lightbox__bar { flex: 0 0 auto; display: flex; align-items: baseline; gap: 1rem; padding: 0.9rem 1.25rem 1.15rem; color: rgba(255, 255, 255, 0.72); font-size: 0.8125rem; line-height: 1.4; border-top: 1px solid rgba(255, 255, 255, 0.12); } .gaf-lightbox__folder { flex: 0 0 auto; font-size: 0.6875rem; font-weight: var(--gaf-weight-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gaf-hover); white-space: nowrap; } .gaf-lightbox__caption { flex: 1 1 auto; min-width: 0; font-weight: var(--gaf-weight-semi); color: rgba(255, 255, 255, 0.88); } .gaf-lightbox__counter { flex: 0 0 auto; font-size: 0.75rem; font-weight: var(--gaf-weight-semi); font-variant-numeric: tabular-nums; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.6); white-space: nowrap; } /* --------------------------------------------------------------------- * Responsive * ------------------------------------------------------------------ */ @media (max-width: 782px) { /* The shortcode writes --gaf-min inline, and inline styles beat a media query, so clamp the track size on the grid itself instead. */ .gaf-grid { grid-template-columns: repeat(auto-fill, minmax(min(var(--gaf-min), 47%), 1fr)); gap: 8px; } .gaf-gallery--fixed-cols .gaf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gaf-gallery--natural .gaf-grid { column-width: auto; column-count: 2; column-gap: 8px; } /* Block layout, not flex. A stretched flex item that also contains the menu is what produced the giant trigger button. */ .gaf-filterbar { display: block; margin-bottom: 1rem; } .gaf-allbtn { display: flex; justify-content: center; width: 100%; margin: 0 0 6px; font-size: 0.875rem; padding: 0.8em 1em; } .gaf-drop { display: block; width: 100%; align-self: auto; } .gaf-drop__trigger { display: flex; width: 100%; min-height: 0; justify-content: space-between; font-size: 0.875rem; padding: 0.8em 1em; } .gaf-folder { margin-bottom: 2.5rem; } .gaf-lightbox__stage { padding: 3.25rem 0.5rem 0.5rem; } .gaf-lightbox__prev, .gaf-lightbox__next { top: auto; bottom: 0.75rem; transform: none; } .gaf-lightbox__prev { left: 0.75rem; } .gaf-lightbox__next { right: 0.75rem; } .gaf-lightbox__bar { flex-wrap: wrap; gap: 0.35rem 0.75rem; padding: 0.75rem 5rem 1.5rem; justify-content: center; text-align: center; } .gaf-lightbox__caption { flex-basis: 100%; order: 3; } } /* Touch devices have no hover, so make the wash the tap feedback instead. */ @media (hover: none) { .gaf-item:active .gaf-item__frame::before { opacity: var(--gaf-hover-opacity); } .gaf-item:hover .gaf-item__img { transform: none; } } /* --------------------------------------------------------------------- * Preferences * ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .gaf-gallery *, .gaf-lightbox * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } /* The green wash is a colour change, so it stays. The zoom does not. */ .gaf-item:hover .gaf-item__img, .gaf-item:focus-visible .gaf-item__img { transform: none; } } @media print { .gaf-filterbar, .gaf-active, .gaf-more, .gaf-lightbox { display: none !important; } .gaf-grid.is-collapsed .gaf-item--extra { display: block; } }