/*
Theme Name: Happy Monday
Theme URI: https://happymondayplanners.com
Author: Happy Monday Planners
Description: Classic (Customizer-based) Gutenberg theme for Happy Monday Planners — the international storefront. Warm editorial design system (Fraunces + DM Sans, cream ground, pink/orange accents). Design tokens live in theme.json; landing pages are assembled from theme-hosted Gutenberg blocks. Customize via Appearance → Customize.
Version: 0.2.24
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.1
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: happymonday
*/
/*
* Colour, typography and design tokens live in theme.json + assets/tokens.css
* (the --hm-* token layer, applied on the front end and in the editor). This
* file styles the classic chrome (announcement bar, split nav, footer) and the
* shared base/layout/accent/frame/button helpers ported from the design system.
* All colour is expressed through var(--hm-*) tokens — no raw brand hex here.
* Modern CSS only.
*/
/* ============================================================================
BASE
============================================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
background: var(--hm-bg);
color: var(--hm-text);
font-family: var(--hm-font-body);
font-weight: var(--hm-body-weight);
font-size: var(--hm-fs-base);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
/* height:auto is load-bearing: images rendered via wp_get_attachment_image()
(the responsive srcset helper) carry real width/height attributes, and WP only
auto-heights `wp-image-*`. Without this, that height attribute is a definite
height, so block rules like `.hm-card img { aspect-ratio: 1/1 }` are ignored
and cards stretch tall. Explicitly-sized images (nav/footer logos, sticky
thumb, feature-hero) override via higher specificity. */
img, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 {
font-family: var(--hm-font-head);
font-weight: var(--hm-head-weight); /* Fraunces sentence-case, weight 600 */
line-height: 1.08;
letter-spacing: -0.01em;
color: var(--hm-ink);
margin: 0 0 var(--hm-sp-1);
font-variation-settings: "opsz" 40, "SOFT" 40;
}
p { margin: 0 0 var(--hm-sp-1); }
a { color: inherit; }
@media (prefers-reduced-motion: reduce) {
* { transition-duration: 0.01ms !important; }
}
/* Accessible skip link (visually hidden until focused). */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 0.6rem 1rem;
background: var(--hm-ink);
color: var(--hm-bg-1);
border-radius: var(--hm-radius-sm);
}
.skip-link:focus {
left: var(--hm-sp-1);
top: var(--hm-sp-1);
}
/* ============================================================================
LAYOUT HELPERS
============================================================================ */
.hm-container { width: min(1180px, 100% - 2 * var(--hm-sp-2)); margin-inline: auto; }
.hm-section { padding-block: var(--hm-sp-4); position: relative; }
.hm-section--tight { padding-block: var(--hm-sp-3); }
.hm-center { text-align: center; }
/* Unified vertical spacing. Blocks add `hm-pad--tight`/`hm-pad--flush` (from
hm_pad_class() / HM.padClass()); Normal = no modifier = the sp-4 default
above. Compounded with the section class so it wins regardless of stylesheet
order. Non-.hm-section sections (feature-bar, stats) mirror this in their own
style.css. */
.hm-section.hm-pad--tight { padding-block: var(--hm-sp-2); }
.hm-section.hm-pad--flush { padding-block: 0; }
.hm-main { display: block; }
/* Unified band + auto-contrast. render.php adds `hm-has-band` and an inline
`--hm-band: var(--hm-…)` (both from hm_color_band_attrs()), plus `is-dark` when
the chosen colour is dark (hm_color_is_dark()). Section intro text flips to the
base colour on dark bands; card interiors keep their own colours. */
.hm-has-band { background: var(--hm-band, transparent); }
/* Gradient band: the stops arrive as two custom properties and the gradient is
composed here, because an inline linear-gradient() is stripped by kses — see
hm_color_band_attrs(). Doubled class so it wins regardless of source order. */
.hm-has-band.hm-has-band--gradient {
background: linear-gradient(180deg, var(--hm-band-from), var(--hm-band-to) 78%);
}
.hm-has-band.is-dark { color: var(--hm-bg-1); }
.hm-has-band.is-dark > .hm-container > :is(h1, h2, h3, h4, h5, h6),
.hm-has-band.is-dark > .hm-container > .hm-eyebrow,
.hm-has-band.is-dark > .hm-container > p,
.hm-has-band.is-dark > :is(h1, h2, h3, h4, h5, h6),
.hm-has-band.is-dark > .hm-eyebrow { color: var(--hm-bg-1); }
/* ============================================================================
ACCENTS & ANNOTATIONS
============================================================================ */
/* .hm-accent = header emphasis in a handwritten script (Caveat), orange/pink. */
.hm-accent {
font-family: var(--hm-font-hand);
font-weight: var(--hm-emph-weight); /* emphasized-role weight */
font-size: calc(1.7em * var(--hm-emph-scale)); /* script runs small — bump; scaled by the emph size control */
color: var(--hm-accent);
line-height: 0.9;
}
.hm-accent--pink { color: var(--hm-accent-pink); }
.hm-accent--bluegrey { color: var(--hm-ink); }
.hm-eyebrow {
font-family: var(--hm-font-script);
font-style: italic;
font-size: var(--hm-fs-lg);
font-weight: var(--hm-label-weight);
color: var(--hm-ink);
margin: 0 0 var(--hm-sp-1);
letter-spacing: 0.005em;
}
.hm-eyebrow--pink { color: var(--hm-accent-1); }
/* margin note / annotation — italic, small & understated */
.hm-note {
font-family: var(--hm-font-script);
font-style: italic;
font-size: var(--hm-fs-script);
font-weight: var(--hm-label-weight);
color: var(--hm-accent-1);
line-height: 1.1;
display: inline-block;
}
.hm-note--bluegrey { color: var(--hm-ink); }
.hm-note--rot { transform: rotate(-3deg); }
.hm-note--rot-r { transform: rotate(2deg); }
/* .hm-doodle: accent-word wrapper. Underline removed per design — kept as an
inline-block hook in case a decoration returns later. */
.hm-doodle {
display: inline-block;
}
/* italic arrow annotations */
.hm-arrow {
font-family: var(--hm-font-script);
font-style: italic;
font-size: var(--hm-fs-script);
font-weight: var(--hm-label-weight);
color: var(--hm-ink);
white-space: nowrap;
}
/* ---- sticker stamps ------------------------------------------------------ */
.hm-stamp {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
text-align: center;
font-family: var(--hm-font-script);
font-weight: 700;
line-height: 1;
color: var(--hm-bg-1);
box-shadow: 0 4px 10px var(--hm-shadow);
padding: 0.6em 0.9em;
z-index: 3;
}
.hm-stamp--circle {
width: 6.2rem; height: 6.2rem;
border-radius: 50%;
font-size: var(--hm-fs-lg);
background: var(--hm-ink);
border: 3px dashed var(--hm-bg-1);
}
.hm-stamp--badge {
border-radius: var(--hm-radius-pill);
font-size: var(--hm-fs-lg);
padding: 0.45em 1.1em;
background: var(--hm-accent-1);
}
.hm-stamp--orange { background: var(--hm-accent-1); }
.hm-stamp--bluegrey { background: var(--hm-ink); }
.hm-stamp--pink { background: var(--hm-accent-1); }
.hm-stamp--rot { transform: rotate(-8deg); }
.hm-stamp--rot-r { transform: rotate(7deg); }
/* ============================================================================
IMAGE FRAMES
Soft rounded corners + EITHER a hairline border OR a gentle soft shadow —
never a heavy combination, no rotation, no tape. An optional italic caption
sits BELOW the image.
============================================================================ */
.hm-frame {
position: relative;
display: block;
border-radius: var(--hm-radius-lg);
overflow: hidden;
background: var(--hm-bg-1-deep);
border: 1px solid var(--hm-line);
box-shadow: 0 10px 30px var(--hm-shadow-soft);
max-width: 100%;
}
/* height:auto is load-bearing, not tidiness. The media carries intrinsic
width/height attributes (render.php sets them to reserve the box against
layout shift); those are presentational hints, so overriding only `width`
leaves the attribute height in force — a 720x1280 clip in a ~370px slide gets
a 370x1280 box with the picture letterboxed inside it (object-fit: contain),
i.e. a card about twice as tall as the video. */
.hm-frame img,
.hm-frame video {
width: 100%;
height: auto;
display: block;
}
/* soft-shadow-only variant (no hairline) for images that sit on a tinted band */
.hm-frame--soft { border: none; box-shadow: 0 16px 40px var(--hm-shadow); }
/* hairline-only variant (flatter, for dense grids) */
.hm-frame--line { box-shadow: none; border: 1px solid var(--hm-line); }
/* an italic caption chip sitting just below the frame */
.hm-frame__cap {
display: block;
margin-top: 0.65rem;
text-align: center;
font-family: var(--hm-font-script);
font-style: italic;
font-weight: var(--hm-label-weight);
font-size: var(--hm-fs-lg);
color: var(--hm-accent-1);
line-height: 1.15;
}
.hm-frame__cap--bluegrey { color: var(--hm-ink); }
/* when a caption follows the frame they share a figure-like wrapper */
figure.hm-figure { margin: 0; }
/* ============================================================================
BUTTONS
============================================================================ */
.hm-btn {
--_bg: var(--hm-cta);
--_fg: var(--hm-cta-text);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5em;
padding: 0.8em 1.6em;
background: var(--_bg);
color: var(--_fg);
font-family: var(--hm-font-body);
font-weight: 700;
font-size: var(--hm-fs-base);
text-decoration: none;
border: 2px solid var(--hm-ink); /* 2px black border */
border-radius: var(--hm-radius-pill);
cursor: pointer;
transition: transform .25s var(--fx-ease); /* no grey underlayer */
}
.hm-btn:hover { transform: rotate(-2deg); } /* slight tilt on hover */
.hm-btn:active { transform: rotate(-2deg) scale(0.97); }
.hm-btn:focus-visible { outline: 3px solid var(--hm-ink); outline-offset: 2px; }
.hm-btn--pink { --_bg: var(--hm-cta-1); --_fg: var(--hm-ink); }
.hm-btn--bluegrey { --_bg: var(--hm-cta-2); --_fg: var(--hm-ink); } /* secondary CTA */
.hm-btn--ghost { --_bg: transparent; --_fg: var(--hm-ink); }
.hm-btn--ghost:hover { background: var(--hm-bg-1-deep); }
.hm-btn--block { width: 100%; }
/* ============================================================================
SITE CHROME — announcement bar, nav, footer
Structural skeleton folded in from design-system/shared/chrome.css.
Layout / spacing / z-index only; colour via var(--hm-*) tokens.
============================================================================ */
/* ---- 1. ANNOUNCE ---------------------------------------------------------- */
.hm-announce {
display: flex;
align-items: center;
justify-content: center;
min-height: 2rem;
padding: 0.375rem var(--hm-sp-2);
font-size: var(--hm-fs-sm);
text-align: center;
background: var(--hm-announce-bg, var(--hm-panel-soft));
color: var(--hm-announce-text, var(--hm-text));
border-bottom: 1px solid var(--hm-chrome-border, transparent);
}
.hm-announce a { color: inherit; }
/* ---- 2. NAV --------------------------------------------------------------- */
.hm-nav {
position: sticky;
top: 0;
z-index: 40;
display: flex;
align-items: center;
gap: var(--hm-sp-2);
height: 60px;
padding: 0 var(--hm-sp-2);
background: var(--hm-nav-bg, var(--hm-bg));
color: var(--hm-nav-text, var(--hm-text));
border-bottom: 1px solid var(--hm-chrome-border, transparent);
}
.hm-nav__logo { flex-shrink: 0; display: flex; align-items: center; }
/* Constrain the badge whether it's a plain ![]()
or the_custom_logo() output
(.custom-logo, which the browser may reparent out of the anchor). */
.hm-nav__logo img,
.hm-nav .custom-logo { height: 28px; width: auto; display: block; }
.hm-nav .custom-logo-link { display: inline-flex; align-items: center; }
.hm-nav__links {
display: flex;
align-items: center;
gap: var(--hm-sp-2);
list-style: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
justify-content: center;
}
.hm-nav__links a { white-space: nowrap; font-size: var(--hm-fs-sm); text-decoration: none; color: var(--hm-nav-link, inherit); }
/* Hover/focus tint for the top-level entries. Deliberately low specificity
(0,2,1) so the dropdown's own hover rule — .hm-nav__links--desktop
.sub-menu a:hover (0,3,1), which also paints a background — keeps winning
for submenu items regardless of source order. */
.hm-nav__links a:hover,
.hm-nav__links a:focus-visible { color: var(--hm-nav-link-hover, var(--hm-nav-link, inherit)); }
.hm-nav__cart { flex-shrink: 0; display: flex; align-items: center; gap: var(--hm-sp-1); margin-left: auto; }
.hm-nav__mobile { display: none; }
.hm-nav__toggle { display: flex; align-items: center; background: none; border: none; cursor: pointer; padding: var(--hm-sp-1); font-size: 1.9rem; line-height: 1; color: inherit; list-style: none; }
.hm-nav__toggle::-webkit-details-marker { display: none; }
@media (max-width: 820px) {
.hm-nav__links--desktop { display: none; }
.hm-nav__mobile { display: block; position: relative; flex: 1 1 auto; }
/* Dropdown card anchored to the hamburger's left edge (the hamburger sits at
the far left on mobile). Positioning lives on the wrapper so a single mobile
menu — or the left+right fallback pair — both render as one stacked panel
instead of overlapping. */
.hm-nav__mobile[open] .hm-nav__panel {
position: absolute; top: 100%; left: 0; right: auto;
min-width: min(72vw, 260px);
display: flex; flex-direction: column; gap: var(--hm-sp-1);
background: var(--hm-nav-bg, var(--hm-bg));
border: 1px solid var(--hm-chrome-border, transparent);
border-top: none;
padding: var(--hm-sp-1) var(--hm-sp-2) var(--hm-sp-2);
z-index: 41;
}
.hm-nav__mobile[open] .hm-nav__panel .hm-nav__links {
flex: none;
flex-direction: column; align-items: flex-start; gap: 0;
}
}
/* ---- 3. FOOTER ------------------------------------------------------------ */
.hm-footer {
display: grid;
grid-template-columns: 1.5fr repeat(3, 1fr);
gap: var(--hm-sp-3) var(--hm-sp-2);
padding: var(--hm-sp-4) var(--hm-sp-2) var(--hm-sp-3);
background: var(--hm-footer-bg, var(--hm-bg));
color: var(--hm-footer-text, var(--hm-text));
border-top: 1px solid var(--hm-chrome-border, transparent);
}
.hm-footer__brand { grid-column: 1; }
.hm-footer__col { grid-column: span 1; }
.hm-footer__legal {
grid-column: 1 / -1;
font-size: var(--hm-fs-sm);
padding-top: var(--hm-sp-2);
border-top: 1px solid var(--hm-chrome-border, transparent);
display: flex; flex-wrap: wrap; gap: 0.25rem var(--hm-sp-1); align-items: center;
}
@media (max-width: 820px) {
.hm-footer { grid-template-columns: 1fr 1fr; }
.hm-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
.hm-footer { grid-template-columns: 1fr; }
}
/* ---- footer polish (from variant-b) -------------------------------------- */
/* Tagline + column headings follow the footer's own text colour (default
--hm-footer-text === var(--hm-bg-1), so this is unchanged by default) —
hardcoding the light tint here made them vanish on a light footer band. */
.hm-footer__brand p { color: var(--hm-footer-text, var(--hm-bg-1)); font-family: var(--hm-font-script); font-size: var(--hm-fs-lg); }
.hm-footer__col h4 { color: var(--hm-footer-text, var(--hm-bg-1)); font-size: var(--hm-fs-base); margin-bottom: var(--hm-sp-1); }
.hm-footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.hm-footer__col a { text-decoration: none; opacity: 0.85; font-size: var(--hm-fs-sm); color: var(--hm-footer-link, inherit); }
.hm-footer__col a:hover { opacity: 1; color: var(--hm-footer-link-hover, var(--hm-footer-link, inherit)); }
/* Footer badge — the fallback ![]()
OR the_custom_logo() output (.custom-logo). */
.hm-footer__logo,
.hm-footer__brand .custom-logo { height: 34px; width: auto; display: block; margin-bottom: var(--hm-sp-1); }
.hm-footer__brand .custom-logo-link { display: inline-flex; }
/* ============================================================================
NAV OVERRIDES (variant B) — badge left, menu split around a centred
wordmark, cart right. The bar stays full-bleed; the inner row is constrained
to the body content width. Menu entries are uppercase.
============================================================================ */
.hm-nav { padding-inline: 0; }
.hm-nav__inner {
display: flex;
align-items: center;
gap: var(--hm-sp-2);
width: min(1180px, 100% - 2 * var(--hm-sp-2));
margin-inline: auto;
}
.hm-nav__brand {
flex-shrink: 0;
display: flex;
align-items: center;
padding-inline: var(--hm-sp-1);
}
.hm-nav__brand img { height: 39px; width: auto; display: block; }
/* Two flanking link groups share the row equally, centring the wordmark */
.hm-nav__links--left,
.hm-nav__links--right { flex: 1 1 0; }
.hm-nav__links--left { justify-content: flex-end; }
.hm-nav__links--right { justify-content: flex-start; }
/* Uppercase menu entries, normal weight (all nav link lists, incl. mobile) */
.hm-nav__links a {
text-transform: uppercase;
font-weight: 400;
letter-spacing: 0.04em;
}
@media (max-width: 820px) {
.hm-nav__mobile { flex: 0 0 auto; order: -1; } /* hamburger first: far left, before the badge logo */
.hm-nav__brand { margin-inline: auto; } /* hamburger · badge left · wordmark centred · cart right */
.hm-nav__brand img { height: 34px; }
}
/* ============================================================================
NAV DROPDOWN — submenu under a parent item (e.g. Shop → categories)
============================================================================ */
/* Desktop: a soft card that drops from the parent on hover / keyboard focus. */
.hm-nav__links--desktop .menu-item-has-children { position: relative; }
/* Caret cue on parent items that own a submenu. */
.hm-nav__links--desktop .menu-item-has-children > a::after {
content: "\203A"; /* › */
display: inline-block;
margin-left: 0.35em;
font-size: 0.9em;
opacity: 0.55;
transform: rotate(90deg);
transition: transform 0.16s ease, opacity 0.16s ease;
}
.hm-nav__links--desktop .menu-item-has-children:hover > a::after,
.hm-nav__links--desktop .menu-item-has-children:focus-within > a::after { opacity: 0.9; }
.hm-nav__links--desktop .sub-menu {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%) translateY(8px);
min-width: 220px;
margin: 0;
padding: 0.4rem;
list-style: none;
display: flex;
flex-direction: column;
gap: 2px;
background: var(--hm-nav-bg, var(--hm-bg));
border: 1px solid var(--hm-chrome-border, rgba(0 0 0 / 0.12));
border-radius: var(--hm-radius);
box-shadow: 0 14px 34px var(--hm-shadow, rgba(0 0 0 / 0.14));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.16s ease, transform 0.16s ease;
z-index: 50;
}
/* Invisible bridge so the pointer can travel from the parent to the card. */
.hm-nav__links--desktop .sub-menu::before {
content: "";
position: absolute;
top: -10px; left: 0; right: 0;
height: 10px;
}
.hm-nav__links--desktop .menu-item-has-children:hover > .sub-menu,
.hm-nav__links--desktop .menu-item-has-children:focus-within > .sub-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(-50%) translateY(4px);
}
.hm-nav__links--desktop .sub-menu a {
display: block;
padding: 0.5rem 0.8rem;
border-radius: var(--hm-radius-sm);
font-size: var(--hm-fs-sm);
text-transform: none; /* softer than the uppercase top level */
letter-spacing: normal;
white-space: nowrap;
transition: background-color 0.14s ease, color 0.14s ease;
}
.hm-nav__links--desktop .sub-menu a:hover,
.hm-nav__links--desktop .sub-menu a:focus {
background: color-mix(in srgb, var(--hm-cta-1) 28%, white);
color: var(--hm-nav-link-hover, var(--hm-text));
}
/* Mobile: the submenu sits inline in the hamburger panel, indented. */
@media (max-width: 820px) {
.hm-nav__mobile[open] .hm-nav__panel .sub-menu {
list-style: none;
margin: 0.25rem 0 0.5rem;
padding-left: var(--hm-sp-2);
display: flex;
flex-direction: column;
gap: 0.35rem;
}
.hm-nav__mobile[open] .hm-nav__panel .sub-menu a { opacity: 0.85; }
}
/* ============================================================================
CONTENT
============================================================================ */
/* Consistent vertical rhythm for prose pages. */
.entry-content > * + * {
margin-block-start: 2.5rem;
}
.entry-content > h2 + * {
margin-block-start: 1.25rem;
}
/* …but Happy Monday blocks are full-bleed bands that self-space via their own
section padding, so consecutive ones must sit flush (no inter-band gap). */
.entry-content > [class*="wp-block-happymonday"] + [class*="wp-block-happymonday"] {
margin-block-start: 0;
}
/* Prose/core blocks on ordinary pages (About, Contact, …) read in a centred
column instead of stretching edge-to-edge. This is an explicit ALLOW-LIST of
core blocks so it never touches full-bleed Happy Monday sections or BoberStore
commerce blocks (cart/checkout/account manage their own width — some hand-write
their wrapper with no wp-block-* class, so an exclusion selector is unreliable). */
.entry-content > :is(
p, h1, h2, h3, h4, h5, h6, ul, ol, dl, blockquote, figure, hr,
.wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote,
.wp-block-image, .wp-block-buttons, .wp-block-table, .wp-block-separator,
.hm-imprint-contact, .wp-block-boberstore-cookie-policy
):not(.alignfull):not(.alignwide) {
width: min(720px, 100% - 2 * var(--hm-sp-2));
margin-inline: auto;
}
.entry-content > .alignwide {
width: min(1180px, 100% - 2 * var(--hm-sp-2));
margin-inline: auto;
}
/* Vertical breathing room for standard pages; the home page (front-page.php,
all full-bleed bands) must meet the header, so it's excluded. */
body:not(.home) .entry-content {
padding-block: var(--hm-sp-4);
}
/* Imprint contact ([hm_imprint_contact]) — real, selectable text in a panel, so
it reads as a details card rather than a run of body copy. It used to be a