/*
Theme Name: Agnosis Theme
Theme URI: https://github.com/leotiger/agnosis-theme
Author: Uli Hake
Author URI: https://agnosis.art
Description: Agnosis Theme is a minimal gallery-focused FSE block theme purpose-built for the Agnosis artist platform. Artwork-first layout, lightbox support, and subdomain routing ready.
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.1
Version: 0.6.8
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: agnosis-theme
Tags: full-site-editing, block-patterns, block-styles, art, portfolio, gallery, custom-logo, custom-menu, featured-images, style-variations, wide-blocks
*/
/*
* Link underline refinement.
*/
a {
text-decoration-thickness: .0625em !important;
text-underline-offset: .15em;
}
/*
* Button — outlined white, fills on hover.
*/
.wp-block-button .wp-block-button__link {
border: 1px solid var(--wp--preset--color--foreground) !important;
background: transparent !important;
color: var(--wp--preset--color--foreground) !important;
transition: background 0.15s ease, color 0.15s ease;
}
.wp-block-button .wp-block-button__link:hover {
background: var(--wp--preset--color--foreground) !important;
color: var(--wp--preset--color--background) !important;
}
/*
* Artwork gallery grid — equal-height image cards.
*/
.agnosis-artwork-grid .wp-block-post {
display: flex;
flex-direction: column;
}
.agnosis-artwork-grid .wp-block-post-featured-image {
flex: 0 0 auto;
}
/*
* Artist events list (archive-agnosis_event.html) — a plain chronological
* list rather than a grid, since each entry is mostly text (date, title,
* location). A hairline divider between entries stands in for the grid's
* card boundaries.
*/
.agnosis-event-list .wp-block-post:not(:last-child) {
border-bottom: 1px solid var(--wp--preset--color--foreground);
padding-bottom: var(--wp--preset--spacing--50);
}
/*
* Taxonomy pill — medium tag displayed beneath artwork title.
*
* .agnosis-medium-terms a is the linked badge used on the gallery archive
* grid (archive-agnosis_artwork.html). .agnosis-medium-terms__badge is the
* unlinked equivalent rendered on the single artwork page
* (single-agnosis_artwork.html) — see agnosis_theme_unlink_medium_badge()
* in functions.php — kept visually identical, just not clickable.
*
* 2026-07-24 (T-1, fifteenth audit): was `opacity: 0.55` on the foreground
* color — computed contrast failed WCAG AA on every style variation (as low
* as 1.68:1 on antiqva), since opacity blends toward the PAGE background at
* render time and the ratio that happens to pass on one background can fail
* badly on another. Now a dedicated `--wp--preset--color--muted` palette
* slot, defined per style variation to its own >=4.5:1 solid color against
* that variation's own background — see theme.json/styles/*.json.
*/
.agnosis-medium-terms a,
.agnosis-medium-terms .agnosis-medium-terms__badge {
display: inline-block;
padding: .2em .65em;
border: 1px solid var(--wp--preset--color--foreground);
border-radius: 2em;
font-size: var(--wp--preset--font-size--small);
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--wp--preset--color--muted);
text-decoration: none;
transition: color 0.15s ease;
}
.agnosis-medium-terms a:hover {
color: var(--wp--preset--color--foreground);
}
/*
* Pagination numbers — plain, no box-model chrome.
*
* 2026-07-24 (T-1): `opacity: 0.4` replaced with `--wp--preset--color--muted`
* (failed AA even on the default palette, 3.42:1) — see the medium-pill
* comment above for the full rationale.
*/
.wp-block-query-pagination .page-numbers {
border: none;
background: transparent;
color: var(--wp--preset--color--muted);
}
.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers:hover {
color: var(--wp--preset--color--foreground);
}
/* ==========================================================================
Artist breadcrumb (agnosis/artist-breadcrumb block)
========================================================================== */
/*
* Small, muted line under the header identifying the current artist on a
* subdomain. Plugin (agnosis 0.9.15+) renders
*
* (nothing at all on the main site) — styling is the theme's job, same as
* every other agnosis-* class the plugin renders. The artist-name link
* stays plain text in appearance (no blue link color, no underline until
* hover) rather than looking like a nav link.
*
* The two spans are laid out with the name on the reading-start side and
* the Biography/Events links (when present — the second span simply isn't
* rendered by the plugin if the artist has neither) on the reading-end
* side. Plain flex `row` + `justify-content: space-between` gets this for
* free in both directions: the browser flips which physical side is
* "start" based on the container's `direction`, so this reverses to
* links-left/name-right automatically on an RTL page — no separate RTL
* rule needed.
*
* 2026-07-10: Biography/Events switched from translated text links to
* icon-only links (agnosis 0.9.15) — some translations of "Biography"/
* "Events" together were wide enough to overflow or wrap awkwardly next to
* the artist's name on narrow/mobile viewports. The translated word is
* still there for screen readers/hover tooltips (`aria-label`/`title` on
* the plugin-rendered ``), just not painted as visible text, so the two
* links are now a fixed width regardless of locale. `__links` gets its own
* flex row so the icons sit inline with each other and with the gap below
* doing the spacing a "|" separator used to do.
*
* 2026-07-10 (later same day): icon choice/size/color became per-instance
* block attributes (`biographyIcon`/`eventsIcon`/`iconSize`/`iconColor`,
* editable from the block's own Inspector panel) — the plugin now writes the
* chosen size directly as the ``'s own `width`/`height` HTML attributes,
* so this stylesheet must NOT set a competing `width`/`height` (or `font-size`
* driving an em-based one) on that `` any more; any CSS `width`/`height`
* declaration beats an element's own HTML attribute regardless of specificity,
* which would silently make the Inspector's Icon size control a no-op.
*
* 2026-07-24 (T-1): `opacity: 0.5` replaced with `--wp--preset--color--muted`
* (see the medium-pill comment above). Because opacity used to dim this
* whole container — text AND the nested icon links together — removing it
* also meant fixing `.agnosis-artist-breadcrumb__links a:hover`, which used
* to read `opacity: 0.7`: with the container no longer dimming its children,
* that value would have made hover LESS visible than resting state instead
* of more. It's now a color swap to the full foreground, matching every
* other de-muted hover state on this page. Same fix applies to
* `.agnosis-artist-breadcrumb-group`/`.wp-block-agnosis-breadcrumb-icon-link`
* below, the real-block-architecture equivalent.
*/
.agnosis-artist-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.25em 1em;
margin: 0;
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
font-size: var(--wp--preset--font-size--small);
font-weight: 300;
color: var(--wp--preset--color--muted);
}
.agnosis-artist-breadcrumb a {
color: inherit;
text-decoration: none;
}
.agnosis-artist-breadcrumb__name a:hover {
text-decoration: underline;
}
.agnosis-artist-breadcrumb__links {
display: flex;
align-items: center;
gap: 0.75em;
}
.agnosis-artist-breadcrumb__links a {
display: inline-flex;
align-items: center;
line-height: 0;
}
.agnosis-artist-breadcrumb__links a:hover {
color: var(--wp--preset--color--foreground);
}
/*
* 2026-07-10: real-block-architecture alternative to the single dynamic
* block above — `agnosis` 0.9.15 added `agnosis/artist-name-link` and
* `agnosis/breadcrumb-icon-link` (one instance per link, via a `type`
* attribute) as small, single-purpose blocks meant to sit inside an ordinary
* `core/group` (className "agnosis-artist-breadcrumb-group" below), styled
* through their own real Color/Typography block *supports* instead of
* `artist-breadcrumb`'s bespoke iconSize/iconColor/iconVerticalAlign
* attributes — and laid out (justify content, vertical alignment) via that
* Group's own native layout controls instead of any CSS here.
*
* `parts/header.html`/`parts/header-pages.html` now use this structure. The
* `.agnosis-artist-breadcrumb` block above is untouched and still fully
* functional for any site whose header template part is already customized
* in the database — WordPress has no way to retroactively rewrite already-
* saved template content when a theme update changes the bundled default, so
* this is intentionally additive, not a replacement.
*
* Deliberately appearance-only (font/color) — no display/flex-wrap/
* align-items/justify-content/gap the way `.agnosis-artist-breadcrumb` has:
* the Group block's own `layout` attributes (set directly in the template)
* are the single source of truth for all of that here, and duplicating or
* fighting them in CSS is exactly what the old block's custom
* `iconVerticalAlign` attribute had to work around.
*/
.agnosis-artist-breadcrumb-group {
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
font-size: var(--wp--preset--font-size--small);
font-weight: 300;
color: var(--wp--preset--color--muted);
}
.wp-block-agnosis-artist-name-link {
color: inherit;
text-decoration: none;
}
.wp-block-agnosis-artist-name-link:hover {
text-decoration: underline;
}
.wp-block-agnosis-breadcrumb-icon-link:hover {
color: var(--wp--preset--color--background);
}
/* ==========================================================================
Footer icon row — social share (Lingua Forge)
Newsletter trigger/popover chrome (.lf-icon-btn, #lf-newsletter-popover,
.lf-popover-close) moved to the agnosis plugin's agnosis/newsletter-popover
block (0.6.3) — that block now ships its own frontend.css, so any theme
using it gets the styling for free instead of reimplementing it here.
========================================================================== */
/*
* Bottom footer row (icon row + copyright) — hand-written, not left to the
* block editor's auto-generated per-instance layout styles. Those are keyed
* to a generated container class and can go stale relative to the saved
* block content (e.g. behind a page cache), silently dropping back to
* block-level default flow. This rule is part of the versioned stylesheet
* (cache-busted via the theme Version header) and is the single source of
* truth for "full width, right-aligned" regardless of that.
*/
.lf-footer-bottom {
width: 100%;
}
/*
* Icon row itself — forced horizontal, no wrap, pinned right. Same reasoning
* as above: explicit and self-contained rather than relying only on the
* block's own generated flex styles.
*/
.lf-footer-icons {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-end;
gap: var(--wp--preset--spacing--30);
}
.lf-footer-social {
flex-wrap: nowrap !important;
}
/*
* Social Icons block — "Logos Only" style, dimmed to match the newsletter
* trigger button (agnosis/newsletter-popover's own .lf-icon-btn) until
* hovered, keeping the row visually quiet.
*/
.wp-block-social-links.is-style-logos-only .wp-social-link {
opacity: 0.6;
transition: opacity 0.15s ease;
}
.wp-block-social-links.is-style-logos-only .wp-social-link:hover {
opacity: 1;
}
/*
* Separators — pulled from the tertiary (very dark) swatch.
*/
.wp-block-separator {
border-color: var(--wp--preset--color--tertiary) !important;
}
/*
* Search input / button — no radius, dark border.
*/
.wp-block-search__input,
.wp-block-search__button {
background: transparent;
color: var(--wp--preset--color--foreground);
border-color: var(--wp--preset--color--tertiary);
border-radius: 0;
}
/* ==========================================================================
Gallery Overview block (agnosis/gallery-overview)
========================================================================== */
/*
* Medium filter bar — horizontal pill row above the grid.
*/
.agnosis-medium-filter {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: var(--wp--preset--spacing--60);
}
.agnosis-medium-filter__term {
display: inline-block;
padding: 0.3em 0.9em;
border: 1px solid var(--wp--preset--color--tertiary);
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--wp--preset--color--foreground);
text-decoration: none;
opacity: 0.45;
transition: opacity 0.15s ease, border-color 0.15s ease;
}
.agnosis-medium-filter__term:hover,
.agnosis-medium-filter__term.is-active {
opacity: 1;
border-color: var(--wp--preset--color--foreground);
}
/*
* Overview grid.
*/
.agnosis-gallery-overview {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--wp--preset--spacing--50);
}
.agnosis-gallery-overview--cols-2 { grid-template-columns: repeat(2, 1fr); }
.agnosis-gallery-overview--cols-3 { grid-template-columns: repeat(3, 1fr); }
.agnosis-gallery-overview--cols-4 { grid-template-columns: repeat(4, 1fr); }
.agnosis-gallery-overview--cols-5 { grid-template-columns: repeat(5, 1fr); }
@media (max-width: 900px) {
.agnosis-gallery-overview,
.agnosis-gallery-overview--cols-3,
.agnosis-gallery-overview--cols-4,
.agnosis-gallery-overview--cols-5 {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 480px) {
.agnosis-gallery-overview,
.agnosis-gallery-overview--cols-2,
.agnosis-gallery-overview--cols-3,
.agnosis-gallery-overview--cols-4,
.agnosis-gallery-overview--cols-5 {
grid-template-columns: 1fr;
}
}
/*
* Empty state — shown instead of the grid when a medium filter (or, more
* rarely, the overview itself) has no matching artwork.
*/
.agnosis-gallery-overview__empty {
text-align: center;
padding: var(--wp--preset--spacing--60) 0;
color: var(--wp--preset--color--foreground);
opacity: 0.7;
}
/*
* Individual artwork card.
*/
.agnosis-gallery-overview__item {
position: relative;
}
/*
* Image wrapper — dark frame with centered artwork.
* Rendered as a (WP .wp-lightbox-container). WP already sets:
* display:flex; flex-direction:column; position:relative
* We add centering + the dark frame treatment on top.
* margin:0 resets the browser default figure margin.
*/
.agnosis-gallery-overview__image-wrap {
margin: 0;
aspect-ratio: 1 / 1;
overflow: hidden;
background: var(--wp--preset--color--tertiary);
padding: 0.75rem;
align-items: center;
justify-content: center;
}
.agnosis-gallery-overview__image-wrap img {
display: block;
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
transition: transform 0.4s ease;
}
.agnosis-gallery-overview__image-wrap:hover img {
transform: scale(1.04);
}
/*
* Featured star badge — top-right corner of the image.
*/
.agnosis-gallery-overview__badge {
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0.7rem;
color: var(--wp--preset--color--foreground);
opacity: 0.6;
line-height: 1;
pointer-events: none;
}
/*
* Caption — title + artist name below the image.
*/
.agnosis-gallery-overview__caption {
display: flex;
flex-direction: column;
gap: 0.15rem;
padding: 0.6rem 0 0;
}
.agnosis-gallery-overview__title {
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
font-size: var(--wp--preset--font-size--medium);
font-weight: 300;
font-style: italic;
line-height: 1.25;
color: var(--wp--preset--color--foreground);
text-decoration: none;
}
.agnosis-gallery-overview__title:hover {
text-decoration: underline;
}
.agnosis-gallery-overview__artist {
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--wp--preset--color--foreground);
opacity: 0.45;
text-decoration: none;
transition: opacity 0.15s ease;
}
.agnosis-gallery-overview__artist:hover {
opacity: 1;
}
/*
* Pagination row.
*/
.agnosis-gallery-overview__pagination {
display: flex;
align-items: center;
gap: 0.25rem;
justify-content: center;
margin-top: var(--wp--preset--spacing--70);
font-family: var(--wp--preset--font-family--plus-jakarta-sans);
}
.agnosis-gallery-overview__page-link {
display: inline-block;
min-width: 2rem;
padding: 0.35em 0.5em;
text-align: center;
font-size: var(--wp--preset--font-size--small);
font-weight: 500;
letter-spacing: 0.04em;
color: var(--wp--preset--color--foreground);
text-decoration: none;
opacity: 0.35;
transition: opacity 0.15s ease;
}
.agnosis-gallery-overview__page-link:hover,
.agnosis-gallery-overview__page-link.is-current {
opacity: 1;
}
.agnosis-gallery-overview__page-link.is-current {
border-bottom: 1px solid var(--wp--preset--color--foreground);
}
/*
* Interaction counts (interaction-surface roadmap, Phase 1, 2026-07-24) —
* the small "♥ N like(s) · ⟲ N boost(s)" line below an artwork's content.
* No rules needed here: ActivityPub::render_interaction_counts() already
* joins the like/boost spans with a plain " · " text separator, and the
* block's own Color/Typography supports (block.json) cover font size/weight/
* family from the Inspector. Deliberately no color override — Ulises's
* design intent is inline, low surface area, never competing visually with
* the artwork, and this theme's muted-text-color gap (T-1, AUDIT-0.9.48.md)
* is a separately tracked, still-open finding this doesn't try to answer.
*/