/*
Theme Name: Mermaidmess
Theme URI: https://mermaidmess.com
Author: Ariel Anderson
Author URI: https://mermaidmess.com
Description: A quiet, gallery-minimal block theme for the artist Ariel Anderson (mermaidmess.com) — imaginative impressionist forest animals in oil. Warm cream surfaces on an oceanic mist background, with a deep-teal footer. Built for full-site editing; all colors, fonts and spacing are editable under Appearance → Editor → Styles.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mermaidmess
Tags: full-site-editing, block-patterns, art, portfolio, one-column, custom-colors, custom-menu, editor-style, threaded-comments
*/
/* -------------------------------------------------------------------------
Most styling lives in theme.json (the WordPress way for block themes).
This file only carries the required theme header above plus a few touches
that theme.json can't express cleanly.
------------------------------------------------------------------------- */
/* The brand wordmark: "mermaid" light + "mess" bold. */
.mm-wordmark {
font-weight: 300;
letter-spacing: -0.02em;
line-height: 1;
}
.mm-wordmark strong { font-weight: 700; }
/* Tracked uppercase "signage" label used for eyebrows + tags. */
.mm-eyebrow {
text-transform: uppercase;
letter-spacing: 0.16em;
font-weight: 600;
}
/* CV timeline: fixed 80px bold year column beside the stacked venues.
Backed by CSS (not block child-layout) so the width is deterministic. */
.mm-cv-year { flex: 0 0 80px; }
/* Artwork frame — gallery-squared with a soft floating shadow. */
.mm-artwork img,
.mm-artwork .wp-block-cover {
border-radius: 2px;
box-shadow: 0 24px 60px -18px rgba(24, 36, 34, 0.28);
}
/* Hero painting: cap the height so it fits the viewport, keep aspect ratio.
In CSS (not an inline style on the ![]()
) so the image block validates. */
.mm-hero-art img { max-height: 68vh; width: auto; }
/* -------------------------------------------------------------------------
Hero rotating gallery (About / home). The slides are a native Gallery block
the artist edits; assets/js/hero-carousel.js cross-fades through them. All
slides are stacked in one CSS grid cell so the cream frame sizes to the
artwork and each slide can fade over the next.
------------------------------------------------------------------------- */
.mm-hero-carousel { position: relative; }
.mm-hero-gallery.wp-block-gallery {
display: grid;
grid-template-areas: "stack";
place-items: center;
gap: 0;
margin: 0;
}
.mm-hero-gallery.wp-block-gallery > .wp-block-image {
grid-area: stack;
margin: 0;
width: 100%;
opacity: 0;
transition: opacity 0.8s ease;
}
/* Before JS initializes, show the first slide so the frame is never blank. */
.mm-hero-carousel:not(.is-ready) .mm-hero-gallery > .wp-block-image:first-child { opacity: 1; }
/* Once JS is ready, only the active slide is visible. */
.mm-hero-carousel.is-ready .mm-hero-gallery > .wp-block-image.is-active { opacity: 1; }
.mm-hero-gallery.wp-block-gallery > .wp-block-image img {
width: auto;
max-width: 100%;
height: auto;
max-height: 68vh;
margin: 0 auto;
display: block;
}
/* Prev / next arrows. */
.mm-carousel-arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 2;
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
border: 1px solid var(--wp--preset--color--paper-300);
border-radius: 999px;
background: var(--wp--preset--color--paper-50);
color: var(--wp--preset--color--ink-900);
font-size: 1.4rem;
line-height: 1;
cursor: pointer;
box-shadow: 0 6px 18px rgba(24, 36, 34, 0.12);
transition: background 0.15s ease, color 0.15s ease;
}
.mm-carousel-arrow:hover,
.mm-carousel-arrow:focus-visible {
background: var(--wp--preset--color--teal-700);
color: #fff;
}
.mm-carousel-prev { left: 0.75rem; display: none !important; }
.mm-carousel-next { right: 0.75rem; display: none !important; }
/* Dot indicators. */
.mm-carousel-dots {
display: none !important;
position: absolute;
left: 0;
right: 0;
bottom: 0.9rem;
z-index: 2;
display: flex;
justify-content: center;
gap: 0.5rem;
}
.mm-carousel-dot {
width: 9px;
height: 9px;
padding: 0;
border-radius: 999px;
border: 1px solid var(--wp--preset--color--teal-700);
background: transparent;
cursor: pointer;
transition: background 0.15s ease, transform 0.15s ease;
}
.mm-carousel-dot[aria-selected="true"] {
background: var(--wp--preset--color--teal-700);
transform: scale(1.25);
}
@media (prefers-reduced-motion: reduce) {
.mm-hero-gallery.wp-block-gallery > .wp-block-image { transition: none; }
}
/* Status tag pill. */
.mm-tag {
display: inline-flex;
align-items: center;
gap: 0.4em;
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 0.75rem;
font-weight: 600;
line-height: 1;
padding: 0.45em 0.7em;
border-radius: 4px;
}
/* -------------------------------------------------------------------------
In-page "Jump to" nav (Available Work & Services page). A small row of pill
links that anchor to the #available-work and #services sections so the
Services band is easy to reach without scrolling the whole grid.
------------------------------------------------------------------------- */
html { scroll-behavior: smooth; }
#available-work, #services { scroll-margin-top: 1.5rem; }
.mm-section-nav { align-items: center; }
.mm-section-nav .mm-section-nav__label { margin: 0; }
.mm-section-nav .mm-section-nav__link { margin: 0; }
.mm-section-nav .mm-section-nav__link a {
display: inline-block;
text-decoration: none;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1;
padding: 0.55em 1.1em;
border-radius: 999px;
border: 1px solid var(--wp--preset--color--sea-300);
color: var(--wp--preset--color--teal-700);
background: var(--wp--preset--color--paper-50);
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.mm-section-nav .mm-section-nav__link a:hover,
.mm-section-nav .mm-section-nav__link a:focus-visible {
background: var(--wp--preset--color--teal-700);
border-color: var(--wp--preset--color--teal-700);
color: #fff;
}
/* -------------------------------------------------------------------------
"See examples" lightbox (Services pattern). Markup is a