/* ========================================================================== Romeo Art Theme — main stylesheet Mobile-first. Design tokens defined in style.css (:root). ========================================================================== */ /* -------------------------------------------------------------------------- Buttons -------------------------------------------------------------------------- */ .btn { display: inline-block; padding: 0.9rem 2.25rem; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; text-align: center; border: 1px solid transparent; transition: background-color var(--transition), color var(--transition), border-color var(--transition); } .btn--gold { background-color: var(--gold); color: var(--white); border-color: var(--gold); } .btn--gold:hover, .btn--gold:focus { background-color: var(--gold2); border-color: var(--gold2); color: var(--white); } .btn--outline { background-color: transparent; color: var(--white); border-color: var(--white); } .btn--outline:hover, .btn--outline:focus { background-color: var(--white); color: var(--black); } /* -------------------------------------------------------------------------- Custom cursor -------------------------------------------------------------------------- */ .cursor-dot, .cursor-ring { position: fixed; top: 0; left: 0; pointer-events: none; border-radius: 50%; z-index: 9999; transform: translate(-50%, -50%); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .cursor-dot { width: 6px; height: 6px; background-color: var(--gold); } .cursor-ring { width: 36px; height: 36px; border: 1px solid var(--gold); transition: width var(--transition), height var(--transition), border-color var(--transition), opacity var(--transition), visibility var(--transition); } .cursor-ring.is-active { width: 56px; height: 56px; border-color: var(--gold2); } @media (hover: none) { .cursor-dot, .cursor-ring { display: none; opacity: 0; visibility: hidden; } } /* -------------------------------------------------------------------------- Site header -------------------------------------------------------------------------- */ /* Wraps .site-header + .site-main only (NOT .site-footer). This is what makes the sticky header below stop being sticky once the page is scrolled into the footer: position:sticky's "stuck" range is bounded by its containing block, and without this wrapper that containing block was itself — spanning the ENTIRE page including the footer — so the 91px-tall header stayed pinned on top of the footer's own logo/quote for the whole time a visitor viewed the footer on a short/mobile viewport (confirmed live: both were completely hidden underneath it at 375px width, scrolled to the true bottom of the homepage, both languages). Scoping the sticky containing block to just header+main means the header naturally detaches and scrolls away normally the moment .site-main ends — exactly at the footer boundary — instead of remaining pinned over it. Also takes over .site-main's old flex-grow role (see the sticky-footer comment in style.css) so short pages still push the footer to the bottom correctly. */ .site-header-main-wrap { display: flex; flex-direction: column; flex: 1 0 auto; } .site-header { position: sticky; top: 0; z-index: 100; background-color: var(--white); border-bottom: 1px solid var(--border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-height); gap: var(--space-md); } .site-branding__name { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--black); white-space: nowrap; flex-shrink: 0; } .branding-accent { color: var(--gold); } .primary-menu { display: none; gap: var(--space-md); } .primary-menu a { font-family: var(--font-sans); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); } /* Armenian header nav weight-matching now handled globally via the `--font-sans` redefinition under `:root:lang(hy)` in style.css (this selector already reads `font-family: var(--font-sans)` above, so it inherits the fix with no rule of its own needed — previously had its own hardcoded `:lang(hy)` override here; removed as pure duplication once the variable itself carries the fallback). */ .primary-menu a:hover { color: var(--gold); } .site-header__tools { display: flex; align-items: center; gap: var(--space-sm); } .search-toggle { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--mid); transition: color var(--transition); } .search-toggle:hover, .search-toggle:focus-visible { color: var(--gold); } .search-toggle svg { /* Sized to sit balanced with the menu items / language switcher text (0.85rem). The 32px button stays as the click/tap target; the icon is centred in it, so it stays vertically aligned with the menu. */ width: 16px; height: 16px; } .lang-switcher { display: flex; gap: var(--space-2xs); font-family: var(--font-display); /* Match the navigation menu items (.primary-menu a). */ font-size: 0.85rem; letter-spacing: 0.1em; } .lang-switcher li.is-current a { color: var(--gold); } .menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; } .menu-toggle__bar { display: block; width: 100%; height: 1px; background-color: var(--black); transition: transform var(--transition), opacity var(--transition); } .menu-toggle.is-active .menu-toggle__bar:nth-child(1) { transform: translateY(6px) rotate(45deg); } .menu-toggle.is-active .menu-toggle__bar:nth-child(2) { opacity: 0; } .menu-toggle.is-active .menu-toggle__bar:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } .main-navigation { position: fixed; top: var(--header-height); left: 0; right: 0; z-index: 99; max-height: calc(100vh - var(--header-height)); max-height: calc(100dvh - var(--header-height)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background-color: var(--white); border-top: 1px solid var(--border); transform: translateY(-100%); opacity: 0; visibility: hidden; transition: transform var(--transition), opacity var(--transition), visibility var(--transition); padding: var(--space-md) 0; } .main-navigation.is-open { transform: translateY(0); opacity: 1; visibility: visible; } .main-navigation .primary-menu { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); } .main-navigation .primary-menu a { display: block; padding: var(--space-2xs) 0; } @media (min-width: 960px) { .main-navigation { position: static; top: auto; left: auto; right: auto; z-index: auto; max-height: none; overflow: visible; flex: 1; display: flex; justify-content: center; transform: none; opacity: 1; visibility: visible; padding: 0; background: none; border-top: none; } .main-navigation .primary-menu { flex-direction: row; } .main-navigation .primary-menu a { padding: 0; } .menu-toggle { display: none; } .site-branding__name { font-size: 1.25rem; letter-spacing: 0.2em; } } /* -------------------------------------------------------------------------- Hero -------------------------------------------------------------------------- */ .hero-wrapper { background: var(--white); padding: 20px; } .hero-panels { display: flex; height: 70vh; } .hero-left, .hero-right { position: relative; flex: 1; overflow: hidden; background-color: var(--light); } .hero-left img, .hero-right img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; transition: opacity 0.8s ease; animation: hero-ken-burns 8s ease-out forwards; } @keyframes hero-ken-burns { from { transform: scale(1); } to { transform: scale(1.06); } } /* Crossfade layer: JS copies the OUTGOING slide here (frozen at its current Ken Burns zoom) and fades it out over the incoming image, so the panel background never flashes between slides. It sits above the image but below the "View Artwork" link (z-index 3), is never the lightbox trigger, and never runs its own Ken Burns (the two-class selector overrides the .hero-left img animation). */ .hero-left .hero-fade-layer, .hero-right .hero-fade-layer { position: absolute; inset: 0; z-index: 2; opacity: 0; pointer-events: none; animation: none; } /* Small, unobtrusive "View Artwork" link overlaid on each hero panel; sits above the image so clicking it navigates to the artwork, while clicking the rest of the image still opens the lightbox. */ .hero-panel__link { position: absolute; bottom: 16px; left: 16px; z-index: 3; display: inline-block; padding: 0.4rem 1rem; font-family: var(--font-display); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--black); background: rgba(255, 255, 255, 0.9); border: 1px solid var(--gold); text-decoration: none; transition: background-color var(--transition), color var(--transition); } .hero-panel__link:hover, .hero-panel__link:focus-visible { background: var(--gold); color: var(--white); } /* Desktop only: face both "View" buttons inward toward the center gap — the left panel's button sits in its bottom-right corner, the right panel's in its bottom-left corner. Mobile (<=768px) keeps both buttons bottom-left, untouched. */ @media (min-width: 769px) { .hero-left .hero-panel__link, .hero-right .hero-panel__link { bottom: 8px; /* Size the button to its label so it hugs the text and stays narrow. Keep the tight 0.18rem top/bottom padding; the small left/right padding keeps the text off the border and fits both "VIEW" (EN) and the longer "Դիտել" (AM) without clipping. (Earlier this was a fixed 74px width to match the thumbnail squares; reducing the side space narrows it below that.) */ padding: 0.18rem 0.45rem; /* Slightly larger, darker label than the base (pure black vs --black) for legibility. */ font-size: 0.64rem; color: #000; text-align: center; } .hero-left .hero-panel__link { left: auto; right: 8px; } .hero-right .hero-panel__link { left: 8px; right: auto; } /* Armenian only (:lang(hy)): the "Դիտել" label renders heavier in the system fallback font, so pure black looks too dark — lighten it slightly. English keeps #000 (above); placed after that rule so it wins at equal specificity. Desktop only — mobile is untouched (outside this media query). */ :lang(hy) .hero-panel__link { color: #333; } } .hero-gap { width: 15px; background: var(--white); flex-shrink: 0; } .hero-thumbs { display: flex; flex-wrap: nowrap; justify-content: center; gap: 8px; padding: 15px 0; overflow-x: auto; } .hero-thumb { width: 70px; height: 70px; flex: 0 0 70px; overflow: hidden; cursor: pointer; border: 2px solid transparent; background-color: var(--light); transition: border-color var(--transition); } .hero-thumb img { width: 100%; height: 100%; object-fit: cover; } .hero-thumb.active, .hero-thumb:hover, .hero-thumb:focus-visible { border-color: var(--gold); } @media (max-width: 768px) { /* Mobile: stack the two hero panels vertically (top + bottom) instead of side by side, so both images are visible at once. Both panels keep their base flex:1, so they split the 70vh height; the 15px gap becomes a full-width horizontal divider. Desktop (side-by-side) is unchanged, and the slider JS already drives both panels (Ken Burns, nav, thumbnails). */ .hero-panels { flex-direction: column; } .hero-gap { width: auto; height: 15px; } /* Mobile: make the "View Artwork" button smaller and tuck it closer to the bottom-left corner of the slide. Desktop sizing/position is unchanged. */ .hero-panel__link { bottom: 8px; left: 8px; padding: 0.24rem 0.56rem; font-size: 0.5rem; letter-spacing: 0.1em; } } .hero-static { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 60vh; padding: var(--space-xl) var(--container-padding); } .hero-static__title { font-family: var(--font-display); letter-spacing: 0.2em; text-transform: uppercase; font-size: clamp(2rem, 5vw, 3.5rem); } .hero-static__tagline { color: var(--mid); font-size: 1.1rem; } /* -------------------------------------------------------------------------- Sections -------------------------------------------------------------------------- */ .section { padding: var(--space-xl) 0; } @media (max-width: 640px) { .section { padding-block: 2.5rem; } } @media (min-width: 641px) and (max-width: 959px) { .section { padding-block: 3.25rem; } } /* Homepage only: tighten the vertical spacing between the preview sections. Each was var(--space-xl) (60px) top + bottom, making ~120px section-to- section gaps; 2rem (32px) each gives ~64px gaps. Scoped to .home and to the specific homepage section classes so no other page is affected. The about-preview's spacing lives on its Bio band (the section is padding:0), so its top is trimmed to match for a consistent News -> About gap. */ .home .featured-works, .home .exhibitions-preview, .home .news-preview { padding-block: 2rem; } /* Featured Works only: trim the bottom spacing (top stays 2rem). This value plus the Exhibitions' top padding (below) make up the Featured Works→ Exhibitions gap; both are kept modest to keep it tight without being cramped. */ .home .featured-works { padding-bottom: 1rem; } /* Exhibitions section's vertical padding: - padding-top tightens the Featured Works→Exhibitions gap (2rem -> 1rem). - padding-bottom tightens the Exhibitions→News gap (2rem -> 1rem). Both halved from the shared 2rem; placed after that rule so they win at equal specificity. The News→About gap (News' bottom) stays 2rem, untouched. */ .home .exhibitions-preview { padding-top: 1rem; padding-bottom: 1rem; } .home .news-preview { padding-top: 1rem; } .home .about-preview__bio-band { padding-top: 2rem; /* Match the top padding: on the homepage the testimonials band follows the bio band, so it isn't :last-child and otherwise gets no bottom padding, leaving the portrait's bottom touching the white band below. */ padding-bottom: 2rem; } /* Featured Works only: tighten the gap between the section title and the cards below it. By default that gap is the title's 1rem bottom margin PLUS the section header's 2rem bottom margin (~3rem); reduce it to a clean 1rem. Scoped to .home .featured-works so other sections' headers are unchanged, and this is the title→cards gap only — section-to-section spacing is untouched. */ .home .featured-works .section__header { margin-bottom: var(--space-sm); } .home .featured-works .section__header .section__title { margin-bottom: 0; } .section__header { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-md); } .section__title { font-size: clamp(1.5rem, 3vw, 2.25rem); } .section__link { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } /* Homepage Exhibitions & News only: stack the header so "View All" sits on the left directly below the section title, with no gap between them (instead of the default title-left / link-right row). Featured Works and every other .section__header keep the default layout. */ .exhibitions-preview .section__header, .news-preview .section__header { flex-direction: column; align-items: flex-start; gap: 0; /* Tighten the gap between the "View All" link (last item in this stacked header) and the cards below it — half the base header's 2rem bottom margin. Only these two sections; other section headers keep var(--space-md). */ margin-bottom: var(--space-sm); } .exhibitions-preview .section__header .section__title, .news-preview .section__header .section__title { margin-bottom: 0; } /* Optically align "View All" with the title text above it. The link is Cinzel (--font-display) and the title is Cormorant Garamond (--font-serif); Cinzel's tighter left side-bearing makes the link's glyphs start a hair left of the title text even though their boxes line up. A 2px left nudge lines the visible text up. */ .exhibitions-preview .section__header .section__link, .news-preview .section__header .section__link { margin-left: 2px; } /* -------------------------------------------------------------------------- About preview (homepage) -------------------------------------------------------------------------- */ .about-preview { /* Layout grouping only — intentionally has NO background of its own, so it can never paint behind (and therefore never affect) the Bio and "What they say" blocks. Each band below owns its background. */ padding: 0; } /* Bio block — its own independent full-width background. */ .about-preview__bio-band { background-color: var(--light); padding-top: var(--space-xl); display: flow-root; } /* When there are no testimonials the Bio band is the last block and keeps the section's original bottom spacing. */ .about-preview__bio-band:last-child { padding-bottom: calc(var(--space-xl) / 2); } /* "What they say" block — its own independent full-width background. */ .about-preview__testimonials-band { background-color: var(--white); padding-bottom: calc(var(--space-xl) / 2); display: flow-root; } @media (max-width: 640px) { .about-preview__bio-band { padding-top: 2.5rem; } } @media (min-width: 641px) and (max-width: 959px) { .about-preview__bio-band { padding-top: 3.25rem; } } .about-preview__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); align-items: center; } @media (min-width: 768px) { .about-preview__inner { grid-template-columns: 1fr 1.4fr; } } .about-preview__media img { width: 100%; height: auto; display: block; } .about-preview__bio { color: var(--mid); margin-bottom: var(--space-md); } .about-preview__bio p:last-child { margin-bottom: 0; } /* -------------------------------------------------------------------------- Testimonials preview (homepage) -------------------------------------------------------------------------- */ .testimonials-preview { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); } .testimonials-preview__label { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-md); } .testimonials-preview__row { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 768px) { .testimonials-preview__row { grid-template-columns: repeat(3, 1fr); } .testimonial-preview-card { padding-inline-start: var(--space-md); border-left: 1px solid var(--gold); } .testimonial-preview-card:first-child { padding-inline-start: 0; border-left: none; } } @media (max-width: 767px) { .testimonial-preview-card { padding-bottom: var(--space-md); border-bottom: 1px solid var(--border); } .testimonial-preview-card:last-child { padding-bottom: 0; border-bottom: none; } } .testimonial__mark { display: block; font-family: var(--font-display); font-size: 2.5rem; line-height: 1; color: var(--gold); margin-bottom: -1rem; } .testimonial__quote { font-family: var(--font-display); font-style: italic; color: var(--dark); margin-bottom: var(--space-2xs); white-space: pre-line; } .testimonial-preview-card__quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .testimonial-preview-card, .testimonial-card { cursor: pointer; transition: box-shadow var(--transition); } .testimonial-card:hover, .testimonial-card:focus-visible { box-shadow: 0 0 0 1px var(--gold); } .testimonial__author { font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; color: var(--dark); margin: 0; } .testimonial__role { font-size: 0.8rem; color: var(--ash); margin: 0; } .testimonials-preview__link { display: inline-block; margin-top: var(--space-md); } /* -------------------------------------------------------------------------- Artwork grid & cards -------------------------------------------------------------------------- */ .artwork-grid, .exhibition-grid, .news-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-md); } @media (min-width: 640px) { .artwork-grid { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .artwork-grid { grid-template-columns: repeat(3, 1fr); } .exhibition-grid, .news-grid { grid-template-columns: repeat(3, 1fr); } } /* -------------------------------------------------------------------------- Testimonials archive -------------------------------------------------------------------------- */ .page-header--with-toggle { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); } /* Masonry view (default): cards positioned absolutely by JS (assets/js/testimonials.js) in a Pinterest-style layout, each at its natural content height. .testimonial-grid becomes the positioning context and its height is set by JS to the tallest column. */ .testimonial-grid { display: block; } .testimonial-card { padding: var(--space-md); background-color: var(--light); } .testimonial-card .testimonial__quote { font-size: 1.05rem; } /* Grid view: equal fixed-height cards, balanced so the last row never leaves a single card stranded — see the per-count rules below. */ .testimonial-grid[data-view="grid"] { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } /* Tablet: 2 columns. A lone card left over in the last row (odd total) spans both columns and is centered, for any number of cards. */ @media (min-width: 640px) and (max-width: 959px) { .testimonial-grid[data-view="grid"] { grid-template-columns: repeat(2, 1fr); } .testimonial-grid[data-view="grid"] .testimonial-card:last-child:nth-child(odd) { grid-column: 1 / -1; max-width: 600px; width: 100%; margin-inline: auto; } } /* Desktop: a 12-column grid lets cards span 3, 4 or 6 columns (4, 3 or 2 per row) so specific card counts can form balanced rows. */ @media (min-width: 960px) { .testimonial-grid[data-view="grid"] { grid-template-columns: repeat(12, 1fr); } .testimonial-grid[data-view="grid"] .testimonial-card { grid-column: span 4; /* default: 3 per row (covers 3, 6 and 9 cards) */ } /* 1 card: full width, capped and centered. */ .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(1):nth-last-child(1) { grid-column: 1 / -1; max-width: 600px; width: 100%; margin-inline: auto; } /* 2 cards: 2 equal columns. */ .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(1):nth-last-child(2), .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(2):nth-last-child(1) { grid-column: span 6; } /* 4 cards: 2 rows of 2. */ .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(1):nth-last-child(4), .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(1):nth-last-child(4) ~ .testimonial-card { grid-column: span 6; } /* 5 cards: row of 3, then 2 centered. */ .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(4):nth-last-child(2) { grid-column: 3 / span 4; } .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(5):nth-last-child(1) { grid-column: 7 / span 4; } /* 7 cards: row of 4, then row of 3. */ .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(1):nth-last-child(7), .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(2):nth-last-child(6), .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(3):nth-last-child(5), .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(4):nth-last-child(4) { grid-column: span 3; } /* 8 cards: 2 rows of 4. */ .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(1):nth-last-child(8), .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(1):nth-last-child(8) ~ .testimonial-card { grid-column: span 3; } /* 10+ cards: if the last row would hold a single card, span it full width and center it; if it would hold 2, center them as a pair — same centering as the 5-card case above. */ .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(n+10):nth-child(3n+1):last-child { grid-column: 1 / -1; max-width: 600px; width: 100%; margin-inline: auto; } .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(n+10):nth-child(3n+1):nth-last-child(2) { grid-column: 3 / span 4; } .testimonial-grid[data-view="grid"] .testimonial-card:nth-child(n+11):nth-child(3n+2):last-child { grid-column: 7 / span 4; } } .testimonial-grid[data-view="grid"] .testimonial-card { display: flex; flex-direction: column; height: 280px; overflow: hidden; } .testimonial-grid[data-view="grid"] .testimonial-card .testimonial__quote { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Masonry: clamp to the same 3-line length as Grid (a full untruncated quote made cards wildly uneven in height, especially long multi-paragraph testimonials). JS (testimonials.js, detectTruncation()) measures whether this clamp actually cut anything off and only then unhides the "Read More" affordance below — the whole card is already a click target that opens the full-text modal, so no separate click handler is needed for it. */ /* --quote-clamp is set per-card, inline, by template-parts/testimonial-card.php (romeo_testimonial_quote_clamp_lines()) — scaled to that card's own quote length so cards vary in height (a single fixed clamp made every card the same height, since every real testimonial is long enough to exceed any one small clamp). Falls back to 3 (Grid's own fixed value) if the property is somehow absent. */ .testimonial-grid[data-view="masonry"] .testimonial-card .testimonial__quote { display: -webkit-box; -webkit-line-clamp: var(--quote-clamp, 3); -webkit-box-orient: vertical; overflow: hidden; } .testimonial-card__read-more { display: inline-block; margin-top: var(--space-3xs); font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; color: var(--gold); letter-spacing: 0.02em; } .testimonial-card__read-more[hidden] { display: none; } /* -------------------------------------------------------------------------- Testimonial modal -------------------------------------------------------------------------- */ body.has-modal-open { overflow: hidden; } .testimonial-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--space-md); background-color: rgba(17, 16, 16, 0.7); opacity: 0; visibility: hidden; transition: opacity var(--transition), visibility var(--transition); } .testimonial-modal.is-active { opacity: 1; visibility: visible; } .testimonial-modal__box { position: relative; width: 100%; max-width: 600px; max-height: 90vh; overflow-y: auto; /* top/bottom 40px, left/right 48px — balanced, not empty. */ padding: 2.5rem 3rem; background-color: var(--white); text-align: center; transform: translateY(16px); transition: transform var(--transition); } .testimonial-modal.is-active .testimonial-modal__box { transform: translateY(0); } .testimonial-modal__close { position: absolute; top: var(--space-2xs); right: var(--space-sm); border: none; background: none; color: var(--mid); font-size: 1.75rem; line-height: 1; cursor: pointer; transition: color var(--transition); } .testimonial-modal__close:hover, .testimonial-modal__close:focus-visible { color: var(--gold); } .testimonial-modal__mark { display: block; font-family: var(--font-display); font-size: 3rem; line-height: 1; color: var(--gold); /* Negative margin pulls the quote text up tight against the mark (same approach as .testimonial__mark on the cards), leaving ~10px. */ margin-bottom: -1rem; } .testimonial-modal__quote { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--dark); margin-bottom: var(--space-md); white-space: pre-line; } .testimonial-modal__author { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; color: var(--dark); margin: 0; } .testimonial-modal__role { font-size: 0.85rem; color: var(--ash); margin: 0; } /* -------------------------------------------------------------------------- Single Testimonial page Mirrors .testimonial-modal__* typography exactly (quote/mark match; author name/role match the modal too — Raleway + --ash, not Cinzel/gold, so the single page's visual identity stays consistent with the card and modal rather than introducing a third, divergent treatment). -------------------------------------------------------------------------- */ .testimonial-single { max-width: 700px; padding-block: var(--space-lg); text-align: center; } .testimonial-single__mark { display: block; font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--gold); margin-bottom: -1rem; } .testimonial-single__quote { font-family: var(--font-display); font-style: italic; font-size: 1.4rem; color: var(--dark); margin-bottom: var(--space-md); white-space: pre-line; } .testimonial-single__author { font-family: var(--font-sans); font-size: 0.9rem; font-weight: 600; letter-spacing: 0.04em; color: var(--dark); margin: 0; } .testimonial-single__role { font-size: 0.85rem; color: var(--ash); margin: 0; } .artwork-card__media { position: relative; display: block; overflow: hidden; background-color: var(--light); aspect-ratio: 1 / 1; } .artwork-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); } .artwork-card:hover .artwork-card__media img { transform: scale(1.04); } .artwork-card__body { padding-top: var(--space-sm); } .artwork-card__title { font-size: 1.15rem; margin-bottom: var(--space-3xs); /* Cormorant Garamond defaults to old-style figures, whose digits sit at uneven heights relative to the baseline — next to a hyphen (fixed mid-height) in codes like "N-006" this reads as crooked. Lining figures sit uniformly on the baseline, same fix already used for phone numbers below (~line 2623). */ font-variant-numeric: lining-nums; } .artwork-card__title a { color: var(--black); } .artwork-card__meta, .artwork-card__price { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.08em; color: var(--mid); margin: 0; } .artwork-card__price { color: var(--gold); margin-top: var(--space-3xs); } /* -------------------------------------------------------------------------- Status badges -------------------------------------------------------------------------- */ .status-badge { display: inline-block; padding: 0.3em 0.85em; font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--white); background-color: var(--mid); } .exhibition-card__media .status-badge { position: absolute; top: var(--space-2xs); left: var(--space-2xs); } /* Exhibition statuses (overlaid on the exhibition image). */ .status-badge.is-upcoming { background-color: var(--gold); } .status-badge.is-ongoing { background-color: var(--green); } .status-badge.is-past { background-color: var(--mid); } /* -------------------------------------------------------------------------- Gallery filters -------------------------------------------------------------------------- */ .gallery-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-bottom: var(--space-md); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--border); } .gallery-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); } /* The four filter controls — the Availability / Year / Medium custom checkbox dropdowns and the native Sort select — share one consistent look: thin gold border, transparent fill, Raleway, uppercase label, gold chevron. */ .filter-dropdown { position: relative; display: inline-block; } .filter-dropdown__toggle, .gallery-filter-select { appearance: none; -webkit-appearance: none; padding: 0.5em 2.25em 0.5em 0.9em; border: 1px solid var(--gold); border-radius: 2px; background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='12'%20height='12'%20viewBox='0%200%2012%2012'%3E%3Cpath%20d='M3%204.5%206%207.5%209%204.5'%20fill='none'%20stroke='%23b8963e'%20stroke-width='1.4'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.85em center; background-size: 0.7em; font-family: var(--font-sans); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--dark); line-height: 1.3; cursor: pointer; transition: border-color var(--transition), color var(--transition); } .filter-dropdown__toggle:hover, .gallery-filter-select:hover, .gallery-filter-select:focus { outline: none; border-color: var(--gold); color: var(--gold); } /* Active state — the dropdown has one or more checked options: label gold. */ .filter-dropdown.is-active .filter-dropdown__toggle { color: var(--gold); } .filter-dropdown__label { display: inline-block; max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; } /* Dropdown panel with the multi-select checkboxes. */ .filter-dropdown__panel { position: absolute; /* Float clearly above the artwork grid below (its cards' .artwork-card__media are positioned, so a low z-index lets later-painted cards cover the panel's bottom edge). Kept below the sticky header (z-index 100). */ z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: 16rem; padding: 0.4em 0; background-color: var(--white); /* Full 1px gold border on all four sides. */ border: 1px solid var(--gold); border-radius: 2px; box-shadow: 0 8px 24px rgba(17, 16, 16, 0.08); /* Show at most ~3 options at a time; scroll for the rest so a long list of years/mediums can never cover the artwork grid below. */ max-height: 5.7rem; overflow-y: auto; /* Thin, gold scrollbar to match the design (Firefox). */ scrollbar-width: thin; scrollbar-color: var(--gold) transparent; } .filter-dropdown__panel[hidden] { display: none; } /* Thin, gold scrollbar (WebKit/Blink). */ .filter-dropdown__panel::-webkit-scrollbar { width: 6px; } .filter-dropdown__panel::-webkit-scrollbar-thumb { background-color: var(--gold); border-radius: 3px; } .filter-dropdown__panel::-webkit-scrollbar-track { background: transparent; } .filter-dropdown__option { display: flex; align-items: center; gap: 0.6em; padding: 0.4em 1em; font-family: var(--font-sans); font-size: 0.8rem; line-height: 1.4; color: var(--dark); white-space: nowrap; cursor: pointer; } .filter-dropdown__option:hover { background-color: var(--off); } .filter-dropdown__option input[type="checkbox"], .filter-dropdown__option input[type="radio"] { width: 0.95em; height: 0.95em; /* Gold tick/dot on checked boxes and radios. */ accent-color: var(--gold); cursor: pointer; } .gallery-filter-select option { color: var(--dark); text-transform: none; } .gallery-view-toggle { display: flex; gap: var(--space-3xs); } .gallery-view-btn { display: flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); color: var(--mid); transition: color var(--transition), border-color var(--transition); } .gallery-view-btn svg { width: 18px; height: 18px; } .gallery-view-btn.is-active, .gallery-view-btn:hover { color: var(--gold); border-color: var(--gold); } .active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-sm); margin-bottom: 1.5rem; } /* The bar is toggled via the `hidden` attribute in JS (activeFiltersWrap.hidden = !hasFilters). Without this guard the `display: flex` above overrides the browser's `[hidden] { display: none }`, so the bar — and "Clear all filters" — stays visible below the filter dropdowns even with no filters applied. Mirror the same [hidden] guard the dropdown panels / load-more button use, so the row (tags + Clear all filters) only appears once filters are active, sitting cleanly above the grid. */ .active-filters[hidden] { display: none; } /* The active-filters bar now lives as the last child INSIDE .gallery-toolbar so it sits above the toolbar's bottom-border divider (not below it). Give it a full-width row of its own (the toolbar wraps), and drop its own bottom margin so the toolbar's padding-bottom provides a clean gap down to the divider. */ .gallery-toolbar .active-filters { flex-basis: 100%; margin-bottom: 0; } .active-filters__tags { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .filter-tag { display: inline-flex; align-items: center; gap: 0.5em; padding: 0.35em 0.8em; font-family: var(--font-sans); font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); background-color: transparent; border: 1px solid var(--gold); border-radius: 2px; cursor: pointer; transition: background-color var(--transition); } .filter-tag:hover, .filter-tag:focus-visible { background-color: var(--goldp); } .active-filters__clear { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid transparent; } .active-filters__clear:hover, .active-filters__clear:focus-visible { border-color: var(--gold); } .gallery-empty { color: var(--mid); padding: var(--space-lg) 0; text-align: center; } .artwork-card.is-hidden, .exhibition-card.is-hidden, .news-card.is-hidden { /* Must beat the per-view card display rules below (list -> flex, masonry -> inline-block), which have higher specificity; without !important, filtered-out / not-yet-loaded cards stay visible in List/Masonry views. Used by both client-side filtering and Load More. */ display: none !important; } /* Load More button (archive grids). */ .load-more-wrap { text-align: center; margin-top: var(--space-lg); } .load-more { display: inline-block; font-family: var(--font-accent); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); background: transparent; border: 1px solid var(--gold); padding: 0.85em 2.4em; cursor: pointer; transition: background-color 0.3s, color 0.3s; } .load-more:hover, .load-more:focus { background: var(--gold); color: var(--white); } .load-more[hidden] { display: none; } /* View toggle: List */ .artwork-grid[data-view="list"] { grid-template-columns: 1fr; gap: var(--space-md); } .artwork-grid[data-view="list"] .artwork-card { display: flex; gap: var(--space-md); } .artwork-grid[data-view="list"] .artwork-card__media { width: 140px; flex-shrink: 0; } @media (min-width: 640px) { .artwork-grid[data-view="list"] .artwork-card__media { width: 220px; } } .artwork-grid[data-view="list"] .artwork-card__body { padding-top: 0; display: flex; flex-direction: column; justify-content: center; } /* View toggle: Large */ .artwork-grid[data-view="large"] { grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 640px) { .artwork-grid[data-view="large"] { grid-template-columns: repeat(2, 1fr); } } /* View toggle: Masonry */ .artwork-grid[data-view="masonry"] { display: block; column-count: 1; column-gap: 8px; } @media (min-width: 640px) { .artwork-grid[data-view="masonry"] { column-count: 2; } } @media (min-width: 960px) { .artwork-grid[data-view="masonry"] { column-count: 3; } } .artwork-grid[data-view="masonry"] .artwork-card { display: inline-block; width: 100%; margin-bottom: 8px; break-inside: avoid; } /* Homepage Featured Works only: visually group each card's title/year with its own image. Pull the text closer to the image above (smaller body top padding) and push the next card further below (larger card bottom margin), so it's clear which image the text belongs to. Scoped to .home .featured-works, so gallery archives and every other grid keep their default spacing. text-align: center added later (2026-07-23) — the title/year line (and any future meta line) reads better centered under the image than left-aligned, for this section only; every other card listing (gallery archives, exhibition Featured Artworks) keeps its default left alignment, since only .artwork-card__body inside .home .featured-works is targeted. */ .home .featured-works .artwork-card__body { padding-top: var(--space-2xs); text-align: center; } .home .featured-works .artwork-grid[data-view="masonry"] .artwork-card { margin-bottom: 1.5rem; } /* Homepage Featured Works only: wider horizontal gap between columns than the site-wide masonry default (8px, .artwork-grid[data-view="masonry"] above) — the cards read as too tightly packed side by side. column-gap is the ONLY thing controlling horizontal spacing in this CSS-multi-column masonry (the vertical spacing between stacked cards in the same column is the separate margin-bottom rule just above, untouched). At the single-column mobile breakpoint (<640px) column-gap has no visual effect at all (nothing to have a gap between), so this needs no separate mobile override; checked at the 2-column (640-959px) and 3-column (960px+) breakpoints that the extra 8px doesn't meaningfully narrow each column. Scoped to .home .featured-works only — the gallery archives' own masonry keeps the original 8px column-gap, untouched. */ .home .featured-works .artwork-grid[data-view="masonry"] { column-gap: var(--space-sm); } /* Artwork category archives (Paintings / Sculptures / Collages / Graphics) in their default Masonry view: same grouping fix as the homepage Featured Works — pull each card's title/price/year closer to its image above and push the next card further below, so it's clear which image the text belongs to. Scoped to the gallery archives (.tax-artwork_category) and the masonry view only, so the Grid / List / Large views keep their own spacing. */ .tax-artwork_category .artwork-grid[data-view="masonry"] .artwork-card__body { padding-top: var(--space-3xs); } .tax-artwork_category .artwork-grid[data-view="masonry"] .artwork-card { margin-bottom: 1.75rem; } /* Keep that metadata block compact so the WHOLE of it — including the price / "Price on Request" line at the bottom — stays close to the image, not just the title. Reducing only the body's top padding (above) moves the block up as a unit, but the price is the third line, so it still reads as far. Collapsing the small inter-line gaps (title -> year/medium line -> price) pulls the year and price up tight under the title, so all the metadata sits close to the image. */ .tax-artwork_category .artwork-grid[data-view="masonry"] .artwork-card__title { margin-bottom: 0; } .tax-artwork_category .artwork-grid[data-view="masonry"] .artwork-card__price { margin-top: 0; /* Breathing room below the price before the next card's image begins. */ margin-bottom: var(--space-xs); } .artwork-grid[data-view="masonry"] .artwork-card__media { aspect-ratio: auto; } .artwork-grid[data-view="masonry"] .artwork-card__media img { height: auto; object-fit: unset; } /* -------------------------------------------------------------------------- Exhibitions & News archive view toggle (List / Grid / Masonry) -------------------------------------------------------------------------- */ /* List view: horizontal rows with a fixed-size image on the left and a clean divider line between rows. */ .exhibition-grid[data-view="list"], .news-grid[data-view="list"] { display: block; } .exhibition-grid[data-view="list"] .exhibition-card, .news-grid[data-view="list"] .news-card { display: flex; flex-direction: column; gap: var(--space-sm); padding: var(--space-md) 0; border-bottom: 1px solid var(--border); } .exhibition-grid[data-view="list"] .exhibition-card:first-child, .news-grid[data-view="list"] .news-card:first-child { padding-top: 0; } .exhibition-grid[data-view="list"] .exhibition-card:last-child, .news-grid[data-view="list"] .news-card:last-child { border-bottom: none; padding-bottom: 0; } @media (min-width: 640px) { .exhibition-grid[data-view="list"] .exhibition-card, .news-grid[data-view="list"] .news-card { flex-direction: row; gap: var(--space-md); } .exhibition-grid[data-view="list"] .exhibition-card__media, .news-grid[data-view="list"] .news-card__media { flex-shrink: 0; width: 280px; height: 200px; aspect-ratio: auto; } .exhibition-grid[data-view="list"] .exhibition-card__body, .news-grid[data-view="list"] .news-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; margin-top: 0; } } /* Grid view: equal cards, 3 columns on desktop. */ .exhibition-grid[data-view="grid"], .news-grid[data-view="grid"] { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 640px) { .exhibition-grid[data-view="grid"], .news-grid[data-view="grid"] { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .exhibition-grid[data-view="grid"], .news-grid[data-view="grid"] { grid-template-columns: repeat(3, 1fr); } } /* Masonry view: cards positioned by JS (assets/js/main.js) into the shortest column at their natural height — same approach as the Testimonials masonry view (assets/js/testimonials.js). */ .exhibition-grid[data-view="masonry"], .news-grid[data-view="masonry"] { display: block; } .exhibition-grid[data-view="masonry"] .exhibition-card__media, .news-grid[data-view="masonry"] .news-card__media { aspect-ratio: auto; } .exhibition-grid[data-view="masonry"] .exhibition-card__media img, .news-grid[data-view="masonry"] .news-card__media img { height: auto; object-fit: unset; } /* -------------------------------------------------------------------------- Single artwork -------------------------------------------------------------------------- */ .artwork-single__inner { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); padding-block: var(--space-lg); } @media (min-width: 960px) { .artwork-single__inner { grid-template-columns: 1.4fr 1fr; } } /* The Photos section sits below the article in its own container; give it the same bottom spacing as the other single pages (var(--space-lg)) so it isn't flush against the footer. */ .artwork-single__photos { padding-bottom: var(--space-lg); } .artwork-single__main-image img { width: 100%; } .artwork-single__zoom { position: relative; display: block; width: 100%; padding: 0; border: none; background: none; cursor: zoom-in; } .artwork-single__zoom img { display: block; width: 100%; } .artwork-single__zoom-icon { position: absolute; right: var(--space-sm); bottom: var(--space-sm); display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: 50%; background-color: rgba(255, 255, 255, 0.85); color: var(--gold); opacity: 0; transform: scale(0.85); transition: opacity var(--transition), transform var(--transition); } .artwork-single__zoom-icon svg { width: 1.25rem; height: 1.25rem; } .artwork-single__zoom:hover .artwork-single__zoom-icon, .artwork-single__zoom:focus-visible .artwork-single__zoom-icon { opacity: 1; transform: scale(1); } .artwork-single__gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2xs); margin-top: var(--space-2xs); } .artwork-single__category a { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); } .artwork-single__title { font-size: 1.5rem; /* matches .artwork-single__price, per explicit request */ margin-top: var(--space-2xs); /* See .artwork-card__title above: lining figures keep digits on a uniform baseline so hyphens in codes like "N-006" align correctly. */ font-variant-numeric: lining-nums; } .artwork-single__series { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: var(--space-3xs); } .artwork-single__specs { margin: var(--space-sm) 0; line-height: 1.8; } .artwork-single__spec-row { display: grid; grid-template-columns: 120px 1fr; /* dt (0.75rem label) and dd (0.95rem value) have different font sizes, so the default grid stretch-alignment sizes both cells to the same box height but leaves their own text sitting at different heights within it. Align on the text baseline instead so label and value sit on one line. */ align-items: baseline; } .artwork-single__spec-row dt { font-family: var(--font-sans); font-size: 0.75rem; font-variant: small-caps; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); margin: 0; text-align: left; } .artwork-single__spec-row dd { font-size: 0.95rem; font-weight: 400; color: var(--dark); margin: 0; } .artwork-single__dim-hint { font-size: 0.8em; color: var(--ash); } .artwork-single__description { font-family: var(--font-display); font-style: italic; font-size: 1.1rem; line-height: 1.7; color: var(--dark); margin: var(--space-md) 0; padding-top: var(--space-sm); border-top: 1px solid var(--border); } /* Stand-in divider shown when the description is empty, so the line above the description area is always visible (mirrors the description's border-top). */ .artwork-single__divider { height: 0; border: 0; border-top: 1px solid var(--border); margin: var(--space-md) 0; } .artwork-single__price { font-family: var(--font-display); font-size: 1.5rem; color: var(--gold); margin-top: var(--space-2xs); } /* Armenian only: the label ends in the bout (՝), which sits tight against the price, so add a small gap. English ("Price:") is unaffected. */ :lang(hy) .artwork-single__price-label, :lang(hy) .artwork-card__price-label { margin-inline-end: 0.3em; } .artwork-single__actions { margin: var(--space-md) 0; } .artwork-single__qr { margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); } .artwork-single__qr img { width: 120px; height: 120px; } .artwork-single__qr-label { font-family: var(--font-display); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; /* Darker shade of the same warm grey (--mid #6b6560) for readability. */ color: #4b4743; /* Tighten the gap down to the Download-QR button (was the default p 1rem). */ margin-bottom: 0.3rem; } /* Download-QR button (single artwork) — minimal gold text link. */ .artwork-single__qr-download { display: inline-flex; align-items: center; gap: 0.45em; margin-top: 0.2rem; font-family: var(--font-accent); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; /* A noticeably darker shade of the gold (--gold #b8963e) for readability of the small "Download QR" label — same hue/saturation (~43deg, 50%), much lower lightness (48% -> ~32%). */ color: #7d6428; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.3s ease, opacity 0.3s ease; } .artwork-single__qr-download svg { width: 13px; height: 13px; } .artwork-single__qr-download:hover, .artwork-single__qr-download:focus-visible { border-bottom-color: var(--gold); outline: none; } /* Armenian (/hy/) only: render the whole "ՆԵՐԲԵՌՆԵԼ QR" label in one font that covers BOTH scripts (Noto Sans Armenian includes Latin), so the Latin "QR" and the Armenian word render at the same weight — otherwise "QR" falls to Raleway (light 300) while the Armenian falls to a heavier system font, making "QR" look lighter even though the colour is identical. English label is unaffected. */ :lang(hy) .artwork-single__qr-download { font-family: 'Noto Sans Armenian', sans-serif; } /* Social share buttons (single artwork) — minimal, gold accent on hover. */ .artwork-share { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; margin-top: var(--space-md); padding-top: var(--space-md); border-top: 1px solid var(--border); } .artwork-share__label { font-family: var(--font-accent); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ash); } /* English single artwork page only: the "SHARE" label is Latin in a light font and reads too faint at --ash, so darken it to the same readable warm grey used for "Scan for details" (#4b4743). The Armenian "Share" renders in a heavier fallback font (already readable), so :lang(hy) keeps the base --ash unchanged. */ :lang(en) .artwork-share__label { color: #4b4743; } .artwork-share__list { display: flex; align-items: center; gap: 0.6rem; margin: 0; padding: 0; list-style: none; } .artwork-share__copy { position: relative; } .artwork-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; color: var(--mid); background: transparent; border: 1px solid var(--border); border-radius: 50%; cursor: pointer; transition: color 0.3s, border-color 0.3s; } .artwork-share__btn svg { width: 16px; height: 16px; } .artwork-share__btn:hover, .artwork-share__btn:focus-visible { color: var(--gold); border-color: var(--gold); outline: none; } .artwork-share__tooltip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--dark); color: var(--white); font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.03em; padding: 0.35em 0.7em; border-radius: 3px; opacity: 0; visibility: hidden; transition: opacity 0.25s ease, visibility 0.25s ease; pointer-events: none; } .artwork-share__tooltip.is-visible { opacity: 1; visibility: visible; } /* -------------------------------------------------------------------------- Exhibitions -------------------------------------------------------------------------- */ .exhibition-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--light); } .exhibition-card__media img { width: 100%; height: 100%; object-fit: cover; } .exhibition-card__body { margin-top: var(--space-sm); } .exhibition-card__date { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); margin: 0 0 0.2em; } .exhibition-card__title { margin: 0 0 0.2em; } .exhibition-card__title a { color: var(--black); } /* Venue/location, kept on a single line. */ .exhibition-card__meta { display: flex; margin: 0.3em 0; } .exhibition-card__venue { min-width: 0; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .exhibition-card__tags { display: flex; flex-wrap: wrap; gap: var(--space-3xs); margin: var(--space-2xs) 0; } .exhibition-card__link { display: inline-block; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: var(--space-3xs); } .tag { display: inline-block; padding: 0.25em 0.75em; font-family: var(--font-display); font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mid); border: 1px solid var(--border); } .exhibition-single__inner { /* Top spacing halved (2rem, was 4rem) — page starts too far below the header now that the top cover photo is gone (see the "top cover photo removed" entry in CLAUDE.md). Bottom spacing is untouched, so the page doesn't feel cramped above the footer. Scoped to this one selector — .artwork-single__inner (single artwork page) still uses the full, unhalved var(--space-lg) on both sides. */ padding-top: calc(var(--space-lg) / 2); padding-bottom: var(--space-lg); } .exhibition-single__meta { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.05em; color: var(--mid); } .exhibition-single__artworks { margin-top: var(--space-xl); } /* -------------------------------------------------------------------------- News -------------------------------------------------------------------------- */ .news-card__media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background-color: var(--light); } .news-card__media img { width: 100%; height: 100%; object-fit: cover; } .news-card__play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background-color: rgba(17, 16, 16, 0.55); } .news-card__play::after { content: ''; position: absolute; top: 50%; left: 54%; transform: translate(-50%, -50%); border-style: solid; border-width: 8px 0 8px 14px; border-color: transparent transparent transparent var(--white); } .news-card__type { position: absolute; top: var(--space-2xs); left: var(--space-2xs); background-color: var(--white); border-color: var(--white); } .news-card__meta { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); margin: var(--space-sm) 0 0.2em; } .news-card__title a { color: var(--black); } .news-card__excerpt { color: var(--mid); margin: var(--space-2xs) 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .news-card__link { display: inline-block; font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); margin-top: var(--space-3xs); } /* Match the single Exhibition page: its .exhibition-single__inner has padding-block: var(--space-lg), which leaves space below the share buttons before the footer. The News inner container had no bottom padding, so the share buttons sat too close to the footer — add the same bottom spacing. Top padding added later (see below) once the same "content touches the header" issue was found here too. */ .news-single__inner { /* Matches .exhibition-single__inner's own halved top spacing exactly (2rem, half of --space-lg) — added because the cover image and article text had NO top padding at all before this, sitting flush against the header. Kept consistent with the exhibition page rather than independently choosing a different value. */ padding-top: calc(var(--space-lg) / 2); padding-bottom: var(--space-lg); } /* News single page title only — scoped to .news-single__text-col so the shared .page-title rule (exhibition page, gallery archives, About, Contact, etc.) is completely untouched. The news layout's title sits in a narrower ~60%-width column alongside the cover image, where the shared clamp(1.75rem, 4vw, 2.75rem) size read as oversized/dominant; reduced to a distinctly smaller clamp so it reads as a headline instead. Weight is intentionally not set here — it inherits the existing bold h1 weight (500) unchanged, only the size shrinks. Reduced further (2026-07-23): desktop cap taken from 2rem (32px) down to 1.5rem (24px); the mobile floor and the vw scaling factor were both scaled down by the same ratio (24/32 = 0.75: 1.5rem -> 1.125rem, 2.5vw -> 1.875vw) so the whole curve shrinks proportionally rather than just clipping the top end, keeping the same relative balance between mobile and desktop sizing as before. */ .news-single__text-col .page-title { font-size: clamp(1.125rem, 1.875vw, 1.5rem); } .news-single__meta { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.05em; color: var(--mid); margin: var(--space-2xs) 0 0.2em; } /* -------------------------------------------------------------------------- Single News: two-column layout (image left, text right) -------------------------------------------------------------------------- */ .news-single__layout { display: flex; flex-direction: column; gap: var(--space-lg); } .news-single__media-col img { display: block; width: 100%; height: auto; border: 1px solid var(--border); } .news-single__text-col .page-header { margin-bottom: var(--space-md); } @media (min-width: 768px) { .news-single__layout { flex-direction: row; align-items: flex-start; gap: 40px; } .news-single__layout:not(.news-single__layout--no-media) .news-single__media-col { flex: 0 0 40%; max-width: 40%; } .news-single__layout:not(.news-single__layout--no-media) .news-single__text-col { flex: 0 0 calc(60% - 40px); max-width: calc(60% - 40px); } .news-single__layout--no-media .news-single__text-col { flex: 1 1 100%; } } .news-single__video { position: relative; aspect-ratio: 16 / 9; margin: var(--space-md) 0; } .news-single__video iframe { width: 100%; height: 100%; } .news-single__media-col .news-single__video { margin: 0; } /* -------------------------------------------------------------------------- Post extras: YouTube embed + external links Shared by single Exhibition and single News templates. -------------------------------------------------------------------------- */ /* Shared with .external-links__label so the two section headings can never visually drift apart. */ .post-video-embed__label, .external-links__label { font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin: var(--space-md) 0 var(--space-2xs); } .post-video-embed { position: relative; aspect-ratio: 16 / 9; width: 100%; margin: 0 0 var(--space-md); border-radius: 4px; overflow: hidden; } .post-video-embed iframe { width: 100%; height: 100%; border: 0; } .external-links { margin: var(--space-md) 0; padding: 0; list-style: none; } .external-links__item + .external-links__item { margin-top: var(--space-2xs); } .external-links__link { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.08em; color: var(--gold); border-bottom: 1px solid transparent; transition: color var(--transition), border-color var(--transition); } .external-links__link:hover, .external-links__link:focus-visible { color: var(--gold2); border-color: var(--gold2); } .external-links__icon { font-size: 0.9em; } /* -------------------------------------------------------------------------- Generic page content -------------------------------------------------------------------------- */ .page-content { padding-top: 2.5rem; padding-bottom: 4rem; } @media (max-width: 640px) { .page-content { padding-top: 1.5rem; padding-bottom: 2.5rem; } } @media (min-width: 641px) and (max-width: 959px) { .page-content { padding-top: 2rem; padding-bottom: 3rem; } } .page-header { margin-bottom: var(--space-md); } .page-title { font-size: clamp(1.75rem, 4vw, 2.75rem); } /* English artwork archive titles (Paintings/Sculptures/Collages/Graphics) render in light Cormorant Garamond, while the Armenian titles fall back to a heavier system serif and look darker — same colour (--black), different weight. Bump ONLY the English archive title's weight (600 = the heaviest Cormorant loaded) so it matches the Armenian's darkness. Armenian (:lang(hy)) and every other page title are unchanged. */ :lang(en) .gallery-archive .page-title { font-weight: 600; } .page-description { color: var(--mid); max-width: 60ch; } /* -------------------------------------------------------------------------- About page -------------------------------------------------------------------------- */ /* Mobile: portrait stacks on top, bio text below it. */ .about-page__media { margin-bottom: var(--space-lg); } .about-page__media img { width: 100%; height: auto; display: block; } .about-page__content .page-header { margin-bottom: var(--space-md); } @media (min-width: 768px) { /* Desktop: float the portrait left so the heading and bio text flow to its right on the same level, then continue full-width below it once they are taller than the image. Only margin-right is set. A left float excludes text across its ENTIRE margin box, so any margin-bottom keeps pushing the lines that land in that gap to the right of the image — they start from the middle instead of the left edge. With no bottom margin the exclusion ends at the image's bottom, so the text returns cleanly to the page's left margin the moment it clears the image. */ .about-page__media { float: left; width: 40%; margin-right: var(--space-xl); margin-bottom: 0; /* Guarantees a gap under the image when wrapped text clears the float and continues full-width below it. margin-bottom would push those wrapped lines toward the middle instead of the left edge (see the comment above) — padding-bottom doesn't, since it's inside the float's own box rather than in its excluded margin area, so the left-edge wrap is unaffected. Content-independent: applies the same gap regardless of how much text wraps beside the image before clearing it (long Armenian text vs. shorter English text). */ padding-bottom: var(--space-md); } /* Contain the float so the comments / footer below clear the portrait. */ .about-page::after { content: ""; display: block; clear: both; } } /* The final bio section ("Exhibitions" / «Ցուցահանդեսներ» onward, split out by romeo_split_about_body_for_layout() in page-about.php) always starts below the portrait at full width, regardless of how much text precedes it in either language. clear:both drops it below the float unconditionally — content-independent by construction, not a fixed height/margin guess. On mobile the portrait isn't floated at all (see the plain, non-@media rules above), so clear:both is a harmless no-op there; everything already stacks in normal document flow. */ .about-page__exhibitions { clear: both; } /* About-page Armenian biography weight-matching now handled globally via the `--font-sans`/`--font-serif` redefinition under `:root:lang(hy)` in style.css — `.page-body` paragraphs/lists inherit `body`'s `font-family: var(--font-sans)`, and its `

` headings use the global `h1-h6 { font-family: var(--font-serif) }` rule, so both already carry the fix with no About-page-specific rule needed. Previously had its own hardcoded `:lang(hy)` override here; removed as pure duplication. / / -------------------------------------------------------------------------- Artist-editable rich-text safety net (2026-07-22) -------------------------------------------------------------------------- / / Word/paste-origin inline styles (font-family, font-size, color, weight) are now stripped server-side on save (inc/content-paste-cleanup.php) and TinyMCE's own paste handling is configured to avoid introducing them in the first place — this is the belt-and-suspenders VISUAL layer underneath both: if any inline styling ever slips through regardless (a future WP/ editor update, some paste path this theme doesn't control), the theme's own typography still wins. `!important` is required — inline `style` attributes outrank any plain author-stylesheet rule on specificity alone. Deliberately NOT a blanket `inherit` on every descendant including headings: that would force

-

to inherit the surrounding paragraph's font instead of getting their own serif/500-weight styling from the theme's global `h1, h2, ... h6` rule, breaking real heading formatting as a side effect of "fixing" pasted junk. Scoped instead to the specific run-level elements Word actually wraps text in (paragraphs, list items, links, spans, bold/italic/underline, blockquotes) — headings are excluded and keep the global heading rule fully in control. font-weight is reset ONLY on (the one wrapper Word always uses for "normal" text, confirmed live: `plain text` — see CLAUDE.md) — never on /, so genuine bold text the artist applies on purpose is completely unaffected; a nested inside a real still correctly inherits bold from its parent, not from this rule. Testimonial quotes are deliberately not listed here: they're rendered via wp_strip_all_tags() at the template level (template-parts/testimonial- card.php), so no HTML of any kind — styled or not — ever reaches the page from that field; there is nothing for this rule to guard against there. / .page-body :is(p, li, a, span, b, strong, i, em, u, blockquote), .about-pageexhibitions :is(p, li, a, span, b, strong, i, em, u, blockquote), .about-previewbio :is(p, li, a, span, b, strong, i, em, u, blockquote), .exhibition-singlecontent :is(p, li, a, span, b, strong, i, em, u, blockquote), .news-singlecontent :is(p, li, a, span, b, strong, i, em, u, blockquote) { font-family: inherit !important; font-size: inherit !important; color: inherit !important; } .page-body span, .about-pageexhibitions span, .about-previewbio span, .exhibition-singlecontent span, .news-singlecontent span { font-weight: inherit !important; } / -------------------------------------------------------------------------- Contact page -------------------------------------------------------------------------- / .contact-pagelayout { display: flex; flex-direction: column; gap: var(--space-xl); margin-top: var(--space-lg); } @media (min-width: 768px) { .contact-pagelayout { flex-direction: row; } .contact-details { flex: 0 0 280px; } .contact-form { flex: 1 1 auto; } } .contact-detailsheading { font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-sm); } .contact-detailslist { display: flex; flex-direction: column; gap: var(--space-2xs); font-family: var(--font-sans); color: var(--mid); } .contact-detailslist a { color: var(--mid); transition: color var(--transition); } .contact-detailslist a:hover { color: var(--gold); } / Armenian contact page (/hy/contact/) only: same fix as the Armenian footer — the email and the phone's Latin digits are Raleway 300 and read lighter than the surrounding Armenian text (which falls back to a heavier system font). Nudge ONLY their weight up so they match the rest of the Contact Details column. Font family, size and colour are unchanged; the English contact page and everything else are untouched (:lang(hy) + mailto/tel). / :lang(hy) .contact-detailslist a[href^="mailto:"], :lang(hy) .contact-detailslist a[href^="tel:"] { font-weight: 500; } / -------------------------------------------------------------------------- Forms -------------------------------------------------------------------------- / .contact-form { max-width: 640px; } .form-row { margin-bottom: var(--space-md); display: flex; flex-direction: column; gap: var(--space-3xs); } .form-row label { font-family: var(--font-display); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); } .form-row input, .form-row textarea { padding: 0.75em 1em; border: 1px solid var(--border); background-color: var(--off); } .form-row input:focus, .form-row textarea:focus { outline: 2px solid var(--gold); outline-offset: 1px; } .form-notice { padding: var(--space-sm) var(--space-md); margin-bottom: var(--space-md); font-size: 0.95rem; } .form-notice--success { background-color: rgba(58, 125, 90, 0.1); color: var(--green); } .form-notice--error { background-color: rgba(139, 58, 58, 0.1); color: var(--red); } / -------------------------------------------------------------------------- Pagination -------------------------------------------------------------------------- / .pagination { margin-top: var(--space-xl); } .pagination ul { display: flex; justify-content: center; gap: var(--space-sm); flex-wrap: wrap; } .pagination a, .pagination span { font-family: var(--font-display); font-size: 0.85rem; padding: 0.4em 0.8em; color: var(--mid); } .pagination .current { color: var(--gold); border-bottom: 1px solid var(--gold); } / -------------------------------------------------------------------------- Site footer -------------------------------------------------------------------------- / .site-main { flex: 1 0 auto; } .site-footer { background-color: var(--light); color: var(--mid); margin-top: 0; border-top: 1px solid var(--border); flex-shrink: 0; } .site-footerinner { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); padding-block: calc(var(--space-xl) / 2); } @media (min-width: 600px) { .site-footerinner { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 960px) { .site-footerinner { grid-template-columns: 1.6fr repeat(3, 1fr); gap: var(--space-xl); } } .site-footer a { color: var(--mid); transition: color var(--transition); } .site-footer a:hover { color: var(--gold); } .footer-heading { font-family: var(--font-sans); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: var(--space-sm); } .footer-menu, .footer-contact { display: flex; flex-direction: column; gap: var(--space-2xs); } / Phone number link (footer + contact page): pin it to the same upright, lining-figure Raleway as the rest of the contact info, so the digits never render slanted/italic or with uneven old-style heights. / .footer-contact a[href^="tel:"], .contact-detailslist a[href^="tel:"] { font-family: var(--font-sans); font-style: normal; font-variant-numeric: lining-nums; } / Armenian footer (/hy/) only: the email and the phone's Latin digits are Raleway 300 and read lighter than the surrounding Armenian text, which falls back to a heavier system font. Nudge ONLY their weight up so they visually match the rest of the column. Font family, size and colour are unchanged; the English footer and everything else are untouched (:lang(hy) + mailto/tel). / :lang(hy) .footer-contact a[href^="mailto:"], :lang(hy) .footer-contact a[href^="tel:"] { font-weight: 500; } .site-footername { font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--black); margin-bottom: var(--space-sm); } / Footer brand links back to the top of the current page. Keeps the brand's own colours (black name + gold "Art") instead of the generic footer-link styling; subtle fade on hover. / .site-footer .site-footername-link { color: inherit; text-decoration: none; transition: opacity var(--transition); } .site-footer .site-footername-link:hover, .site-footer .site-footername-link:focus-visible { color: inherit; opacity: 0.7; } .site-footerquote { font-family: var(--font-serif); font-style: italic; font-size: 1.05rem; line-height: 1.6; color: var(--mid); max-width: 32ch; margin-bottom: var(--space-md); } / The footer quote is Cormorant Garamond, which has no Armenian glyphs, so on /hy/ the Armenian text falls back to a system serif whose larger x-height makes it render visually bigger at the same 1.05rem. font-size-adjust pins the fallback to Cormorant's exact x-height ratio (measured xHeight/em = 386/1000), so the Armenian quote appears the same size as the English one. The font-size value itself (1.05rem) is identical in both languages. / :lang(hy) .site-footerquote { font-size-adjust: 0.386; / The Armenian quote is a hair wider than the base 32ch cap, so its last word wraps to a second line. Lift the cap (Armenian only) so it stays on one line — the footer column constrains the width, and the font size is unchanged (still matches the English quote). / max-width: none; } .social-iconslabel { font-family: var(--font-sans); / Match the footer column headings' weight (600) so the gold renders at the same density — at the inherited body weight (300) it looked lighter even though the colour (var(--gold)) is identical. / font-weight: 600; font-size: 0.85rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.6rem; } .social-icons { display: inline-flex; align-items: center; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; } .social-iconslink { display: inline-flex; align-items: center; justify-content: center; color: var(--ash); transition: color 0.3s ease; } .social-iconslink:focus-visible { color: var(--gold); } .social-iconslink.social-iconslink--instagram { color: #e1306c; } .social-iconslink.social-iconslink--facebook { color: #1877f2; } .social-iconslink.social-iconslink--linkedin { color: #0a66c2; } .social-iconslink.social-iconslink--pinterest { color: #e60023; } .social-iconslink svg { width: 18px; height: 18px; } .site-footerbottom { border-top: 1px solid var(--border); } .site-footerbottom-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-sm); padding-block: var(--space-sm); font-size: 0.85rem; text-align: center; } .site-footerbottom-inner .lang-switcher { font-size: 0.85rem; } / Match the header: inactive language inherits the dark text colour, the active (current) language is gold — same active/inactive contrast as .lang-switcher in the header. / .site-footerbottom-inner .lang-switcher a { color: var(--black); font-weight: 600; } .site-footerbottom-inner .lang-switcher li.is-current a { color: var(--gold); } .site-footercopyright { margin: 0; color: var(--gold); font-weight: 600; } .site-footercredits { display: flex; align-items: center; gap: var(--space-2xs); } .site-footercredits-text { margin: 0; font-size: 0.85rem; letter-spacing: 0.08em; color: var(--gold); font-weight: 600; } / "Created by ..." text links to the developer's LinkedIn (same URL as the icon, set in Settings -> Footer Info). Keeps the gold text colour, turns LinkedIn blue on hover like the icon. / .site-footer .site-footercredits-link { color: inherit; text-decoration: none; transition: color var(--transition); } .site-footer .site-footercredits-link:hover, .site-footer .site-footercredits-link:focus-visible { color: #0a66c2; } .site-footer .site-footercredits-linkedin { display: inline-flex; / Same as the Social Media LinkedIn icon: always LinkedIn blue, 18px. Scoped under .site-footer so it outranks the generic ".site-footer a" colour (var(--mid)) that was keeping the icon grey. / color: #0a66c2; transition: color var(--transition); } .site-footer .site-footercredits-linkedin:hover, .site-footer .site-footercredits-linkedin:focus-visible { color: #0a66c2; } .site-footercredits-linkedin svg { width: 18px; height: 18px; } @media (min-width: 768px) { .site-footerbottom-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; text-align: left; } .site-footercredits { justify-self: center; } .site-footerbottom-inner .lang-switcher { justify-self: end; } } / -------------------------------------------------------------------------- 404 / no results -------------------------------------------------------------------------- / .error-404__actions { margin: var(--space-md) 0 var(--space-lg); } / Styles the default WP get_search_form() markup (.search-form/.search-field/ .search-submit) to match the theme. Scoped to the 404 page and the entire Search Results page (both its zero-results AND has-results states): - .error-404 = the 404 template. - .search-no-results / .search-results = the body classes WP core adds automatically to the Search Results page (search.php) — .search-results when the query has posts, .search-no-results when it doesn't (get_body_class()). Both share this exact same form styling so the header search form looks identical regardless of whether the search produced results. / .error-404 .search-form, .search-no-results .search-form, .search-results .search-form { display: flex; flex-wrap: wrap; gap: var(--space-2xs); max-width: 480px; } .error-404 .search-form label, .search-no-results .search-form label, .search-results .search-form label { flex: 1 1 220px; display: block; } .error-404 .search-field, .search-no-results .search-field, .search-results .search-field { width: 100%; padding: 0.75em 1em; border: 1px solid var(--border); background-color: var(--off); font-family: var(--font-sans); font-size: 1rem; color: var(--black); transition: border-color var(--transition); } .error-404 .search-field::placeholder, .search-no-results .search-field::placeholder, .search-results .search-field::placeholder { color: var(--ash); } .error-404 .search-field:focus, .search-no-results .search-field:focus, .search-results .search-field:focus { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--gold); } .error-404 .search-submit, .search-no-results .search-submit, .search-results .search-submit { flex: 0 0 auto; padding: 0.9rem 2.25rem; font-family: var(--font-display); font-size: 0.8rem; letter-spacing: 0.15em; text-transform: uppercase; background-color: var(--gold); color: var(--white); border: 1px solid var(--gold); cursor: pointer; transition: background-color var(--transition), border-color var(--transition); } .error-404 .search-submit:hover, .error-404 .search-submit:focus-visible, .search-no-results .search-submit:hover, .search-no-results .search-submit:focus-visible, .search-results .search-submit:hover, .search-results .search-submit:focus-visible { background-color: var(--gold2); border-color: var(--gold2); } / "Nothing Found" heading + subtext — Search Results page only. The .no-results markup (template-parts/content-none.php) is shared with other empty archives (galleries, exhibitions, news, testimonials, index), so this is scoped to body.search-no-results and does not change how it looks anywhere else. / .search-no-results .no-results { max-width: 480px; margin-top: var(--space-sm); } .search-no-results .no-results h2 { font-family: var(--font-serif); font-size: 1.75rem; font-weight: 500; color: var(--black); margin: 0 0 var(--space-2xs); } .search-no-results .no-results p { font-family: var(--font-sans); font-size: 1rem; color: var(--mid); margin: 0 0 var(--space-md); } / -------------------------------------------------------------------------- Artwork lightbox -------------------------------------------------------------------------- / body.has-lightbox-open { overflow: hidden; } .lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.92); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s; } .lightbox.is-active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.3s ease, visibility 0s linear 0s; } .lightboxstage { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; overflow: hidden; } .lightboximage { max-width: 90vw; max-height: 90vh; width: auto; height: auto; object-fit: contain; opacity: 0; transition: opacity 0.3s ease; } .lightboximage.is-visible { opacity: 1; } .lightboxclose { position: absolute; top: var(--space-md); right: var(--space-md); padding: 0.25em 0.5em; border: none; background: none; color: var(--white); font-size: 2.5rem; line-height: 1; cursor: pointer; transition: color var(--transition); z-index: 2; } .lightboxclose:hover, .lightboxclose:focus-visible { color: var(--gold); } .lightboxnav { position: absolute; top: 50%; transform: translateY(-50%); border: none; background: none; color: var(--white); font-size: 2.5rem; line-height: 1; padding: var(--space-2xs) var(--space-sm); cursor: pointer; transition: color var(--transition); z-index: 2; } .lightboxnav:hover, .lightboxnav:focus-visible { color: var(--gold); } .lightboxnav--prev { left: var(--space-2xs); } .lightboxnav--next { right: var(--space-2xs); } .lightboxnav[hidden] { display: none; } .lightboxcounter { position: absolute; bottom: var(--space-md); left: 50%; transform: translateX(-50%); color: var(--white); font-family: var(--font-display); font-size: 0.85rem; letter-spacing: 0.15em; } .lightboxcounter[hidden] { display: none; } @media (max-width: 600px) { .lightboxnav { font-size: 2rem; padding: var(--space-3xs) var(--space-2xs); } .lightboxclose { top: var(--space-sm); right: var(--space-sm); } } / -------------------------------------------------------------------------- Search overlay -------------------------------------------------------------------------- / body.has-search-open { overflow: hidden; } .search-overlay { position: fixed; top: 0; left: 0; right: 0; z-index: 1100; height: 80px; display: flex; align-items: center; justify-content: center; padding: 0 calc(var(--container-padding) + 50px); background-color: var(--white); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); transform: translateY(-100%); transition: transform 0.3s ease; } .search-overlay.is-open { transform: translateY(0); } .search-overlayform { display: flex; align-items: center; width: 100%; max-width: 720px; } .search-overlayinput { width: 100%; border: none; background: none; font-family: var(--font-serif); font-size: clamp(1.25rem, 4vw, 2rem); color: var(--black); } .search-overlayinput:focus { outline: none; } .search-overlayinput::placeholder { color: var(--ash); } .search-overlayclose { position: absolute; top: 50%; right: var(--container-padding); transform: translateY(-50%); padding: 0.25em 0.5em; border: none; background: none; color: var(--mid); font-size: 2rem; line-height: 1; cursor: pointer; transition: color var(--transition); } .search-overlayclose:hover, .search-overlayclose:focus-visible { color: var(--gold); } / -------------------------------------------------------------------------- Search results — clean list view, consistent across all content types -------------------------------------------------------------------------- / .search-results { display: flex; flex-direction: column; } / Thin divider between each result (not after the last). / .search-result { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-md) 0; border-bottom: 1px solid var(--border); } .search-result:first-child { padding-top: 0; } .search-result:last-child { border-bottom: none; } / Thumbnail — one consistent size for every result, whatever the content type. / .search-resultmedia { flex: 0 0 auto; width: 110px; height: 110px; display: block; overflow: hidden; background-color: var(--light); } .search-resultmedia img { width: 100%; height: 100%; object-fit: cover; display: block; } / Neutral placeholder fills the same footprint when a result has no image. / .search-resultplaceholder { display: block; width: 100%; height: 100%; background-color: var(--light); } / Testimonials have no image — fill the same thumbnail box with the site's gold quotation mark, centred (matches .testimonialmark on the cards / modal: Cinzel display font, gold #b8963e). / .search-resultplaceholder--quote { display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 4rem; line-height: 1; color: var(--gold); } .search-resultbody { flex: 1 1 auto; min-width: 0; } / Type badge — gold outline, Raleway, uppercase (matches the active-filter tags). */ .search-resultbadge { display: inline-block; margin-bottom: var(--space-2xs); padding: 0.3em 0.85em; font-family: var(--font-sans); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); border: 1px solid var(--gold); border-radius: 2px; } .search-resulttitle { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2; margin: 0 0 var(--space-2xs); } .search-resulttitle a { color: var(--black); text-decoration: none; transition: color var(--transition); } .search-resulttitle a:hover, .search-resulttitle a:focus-visible { color: var(--gold); } .search-resultexcerpt { margin: 0; font-family: var(--font-sans); font-size: 0.9rem; line-height: 1.6; color: var(--mid); } @media (max-width: 480px) { .search-result { gap: var(--space-sm); } .search-resultmedia { width: 84px; height: 84px; } }